简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

高洛峰
풀어 주다： 2017-03-13 17:39:09
원래의
2080명이 탐색했습니다.

이 글에서는 주로 CSS 텍스트 래핑 이미지에서 발생하는 문제와 해결 방법을 자세히 소개합니다. 관심 있는 친구들은

CSS로 텍스트 래핑 이미지 효과 얻기

를 참조하세요. 이미지 주위에 텍스트 배치. Word에서는 마우스 오른쪽 버튼을 클릭하고 속성을 조정하세요. 하지만 HTML 문서에는 직접적인 속성이 없습니다. 따라서 CSS를 사용하여 이 효과를 얻을 수 있습니다.

먼저 float의 매개변수를 설정합니다. 이미지를 왼쪽 정렬해야 하면 왼쪽으로 설정합니다. 받는 사람: 맞습니다. 또한 필요에 따라 이미지와 텍스트 사이의 간격을 설정할 수도 있으며 CSS 패딩도 적용 가능합니다.

예:

코드는 다음과 같습니다.

<img    style="max-width:90%" src="/Upic.jpg" alt="CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기" >将这一个图片标识语句，插入到页面文字中间，就OK啦！
로그인 후 복사

(1) 텍스트 래핑 이미지 예시

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
p {   
width:300px;   
border:1px solid green   
}   
img {   
float:left;   
width:120px;   
height:120px   
}    
</style>
</head>
<body>
<p>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</body>
</html>
로그인 후 복사



렌더링:

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

(2) CSS 텍스트 그림 감싸기 시 발생하는 문제 및 해결 방법:

1. 서문

그림 주위에 텍스트 감싸기 효과를 구현해야 한다고 생각했습니다. 너무 쉬워요.

1) 코드 부분



코드 복사

코드는 다음과 같습니다.

< ;/p>2) 효과 그림

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

구하기 쉽습니다 원하는 효과. 가장 중요한 코드: 이미지를 왼쪽으로 띄우기만 하면 됩니다. 꽤 간단하지 않나요?

2. 문제 발생

가운데 글자를 연속된 영문자로 바꾸면 그림과 같이 문제가 발생합니다

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

그래서 관련 정보를 검색했고, 결과를 테스트한 결과 다음과 같은 것을 발견했습니다.

브라우저는 기본적으로 영어나 숫자를 파싱할 때 단어에 따라 파싱합니다.

즉, 각 단어는 전체이고, 공간이 부족할 경우 단어가 분할되지 않습니다.

그래서 위와 같은 상황이 발생합니다.

마지막 비교 차트

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

3. 해결 방법

생각: CSS에 관련 속성이 있습니까? 텍스트를 강제로 줄 바꿈할 수 있나요?

물론 답이 있습니다: word-break: break-all;

이렇게 하면 문제가 해결됩니다.

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기


4. 추기: 단어 줄 바꿈, 단어 분리

정보를 검색하는 동안 다른 속성을 발견했습니다: word-wrap: break-word; 왜 중복된 속성이 있나요?

사실 그렇지는 않아서 다시 정보를 찾아보니 둘 사이에 여전히 차이가 있는 걸 발견했습니다.

1) word-wrap: break-word;

--긴 단어는 허용됩니다. 다음 줄로 줄바꿈하세요.

단어의 길이가 p의 너비를 초과하면 기본적으로 다음과 같이 줄바꿈되지 않습니다.

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

word-wrap이 설정된 경우: break-word; 해당 단어가 새 줄에 표시됩니다.

CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기

2) word -break: break-all;

-- 단어를 분리할지 여부입니다.

--개인적인 이해는 단어의 각 문자를 독립된 단위로 분할한다는 것입니다.

모든 위치를 채울 수 있도록 하여 텍스트 줄바꿈을 달성할 수 있습니다. 그림 효과 .


위 내용은 CSS를 사용하여 이미지 주위에 텍스트를 감쌀 때 발생하는 문제와 해결 방법입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

위 내용은 CSS를 사용하여 이미지에 텍스트 줄 바꿈 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css
원천：php.cn
이전 기사：CSS3 첫 번째 자식 선택기 실제 코드 다음 기사：수평 센터링을 달성하기 위해 CSS를 사용하는 4가지 아이디어에 대한 간략한 개요
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1335
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！