집 > 기사 > 웹 프론트엔드 > CSS 자동 줄 바꿈을 설정하는 방법

CSS 자동 줄 바꿈을 설정하는 방법

coldplay.xixi원래의: 2021-03-02 10:52:5012002검색

CSS 자동 줄바꿈 설정 방법: [word-break] 속성을 사용하면 브라우저가 어떤 위치에서든 줄바꿈을 할 수 있습니다. 코드는 [.p3{width:200px;border:1px solid #ccc;word 입니다. -break:break-all].

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, DELL G3 컴퓨터.

CSS 자동 줄 바꿈 설정 방법:

자동 줄 바꿈 속성, word-break 속성을 사용하면 브라우저가 어떤 위치에서든 줄 바꿈을 할 수 있습니다word-break属性，可以让浏览器实现在任意位置换行

它有三个属性值分别为：

normal：浏览器中的默认换行行为
break-all：可允许在单词内换行
keep-all
세 가지가 있습니다 속성 값:

normal

break- all: 단어 내 줄 바꿈이 허용됩니다

keep-all: 줄 바꿈은 반각 공백이나 하이픈에서만 가능합니다

예:

<style>
.p1{
width:200px;
border:1px solid #ccc;
word-break:normal;
}
 
.p2{
width:200px;
border:1px solid #ccc;
word-break:keep-all;
}
 
.p3{width:200px;
border:1px solid #ccc;
word-break:break-all;
}
</style>
</head>
<body>
<p class="p1">Php Chinese website provides a large number of free, original, 
high-definition php video tutorials.</p>
<p class="p2">Php Chinese website provides a large   number of free, 
original, high-definition php video tutorials.</p>
<p class="p3">Php Chinese website provides a large number of free, original,
 high-definition php video tutorials.</p>
</body>

렌더링:

🎜 🎜🎜🎜🎜관련 튜토리얼 권장 사항: 🎜CSS 비디오 튜토리얼🎜🎜🎜

위 내용은 CSS 자동 줄 바꿈을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 break border word

성명：

이전 기사：div가 CSS로 래핑되는 것을 방지하는 방법다음 기사：div가 CSS로 래핑되는 것을 방지하는 방법