CSS를 래핑하는 방법

CSS에서는 word-break 및 공백 속성을 사용하여 자동 줄 바꿈을 설정합니다. word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 줄바꿈할 수 있으며 공백 속성은 텍스트를 설정할 수 있습니다. 포장 방법.

이 문서의 운영 환경: windows7 시스템, css3 버전, Dell G3 컴퓨터.

CSS에서 줄을 묶는 방법은 무엇입니까?

css는 컨테이너가 자동 단어 줄 바꿈에 맞지 않게 만듭니다.

css는 단어 분리와 공백의 두 가지 속성을 통해 자동 단어 줄 바꿈을 설정할 수 있습니다. word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 줄 바꿈할 수 있습니다. 공백 속성은 텍스트 줄 바꿈 방법을 설정할 수 있습니다.

css로 인해 컨테이너가 자동 줄 바꿈에 맞지 않게 됩니다.

css 코드:

<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
border:1px solid ;/*定义容器外边框*/
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}
</style>

HTML 코드:

CSS 컨테이너 콘텐츠가 자동 줄 바꿈을 초과(오버플로)합니다. CSS 컨테이너 콘텐츠 초과(오버플로) 자동 줄 바꿈, CSS 컨테이너 콘텐츠 초과(오버플로) 자동 줄 바꿈

Rendering:

word-break 속성:

word-wrap 속성은 긴 단어 또는 URL을 허용합니다. 다음 줄로 넘어갈 주소입니다.

구문: ​​

word-wrap: normal|break-word;

속성 값:

normal 허용된 하이픈 넣기 지점에서만 줄바꿈이 가능합니다(브라우저는 기본 처리를 유지합니다).

break-word 긴 단어나 URL 주소 안의 줄을 바꿉니다.

white-space 속성

공백 속성은 요소 내의 공백을 처리하는 방법을 설정합니다.

속성 값:

일반 기본값. 브라우저는 공백을 무시합니다.

사전 공백은 브라우저에 의해 보존됩니다. 이는 HTML의

 태그처럼 작동합니다. <p>nowrap 텍스트는 줄바꿈되지 않으며 <br> 태그가 나타날 때까지 같은 줄에 계속 표시됩니다. </p><p>pre-wrap 공백 시퀀스를 유지하지만 정상적으로 래핑합니다. </p><p>pre-line은 공백 시퀀스를 병합하지만 개행은 유지합니다. </p><p>inherit는 공백 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. </p><p>추천 학습: "<a href="https://www.php.cn/course/list/12.html" target="_blank">css 동영상 튜토리얼</a>"</p>

위 내용은 CSS를 래핑하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!