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

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

이 글에서는 주로 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
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿