CSS3 비라인 래핑 기술 소개 및 적용 사례
- PHPz원래의
- 2023-04-24 09:07:38582검색
CSS3 non-wrapping은 줄의 끝을 만나면 자동으로 줄 바꿈되지 않고 다음 줄로 계속 확장되도록 텍스트 내용에 스타일을 설정하는 것을 의미합니다. 이 기술은 한 줄의 텍스트나 코드 영역 등을 디자인하여 페이지를 더 깔끔하고 명확하게 만드는 데 자주 사용됩니다.
CSS3에는 줄 바꿈을 달성하기 위해 일반적으로 사용되는 두 가지 방법, 즉 공백과 단어 줄 바꿈이 있습니다. 다음으로 각각을 소개하고 적용 사례를 제시하겠습니다.
1. 공백
공백 속성은 요소의 공백 부분을 처리하는 방법을 정의합니다.
이 속성에는 다음과 같은 선택적 값이 있습니다.
- normal: 기본값. 추가 공백을 무시하십시오.
- nowrap: 텍스트가 줄바꿈되지 않습니다.
- pre: 모든 공백과 줄 바꿈을 유지합니다.
- pre-wrap: 모든 공백과 줄 바꿈을 유지하되 래핑합니다.
- pre-line: 추가 공백을 무시하고 줄 바꿈을 유지합니다.
적용 예:
<style>
.nowrap {
white-space: nowrap; /*文本不换行*/
}
.pre {
white-space: pre; /*保留所有空格与换行符*/
}
</style>
<div class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格
和 换 行 符
2. word-wrap
word-wrap 속성은 줄 바꿈 시 너무 긴 단어를 잘라서 두 번째 줄에 배치할 수 있는지 여부를 지정하는 데 사용됩니다. 실제 응용 프로그램에서 더 좁은 컨테이너 너비를 설정할 때 단어가 잘리지 않고 줄 바꿈이 가능하도록 하려면 이 속성을 설정해야 합니다.
이 속성에는 다음과 같은 선택 값이 있습니다.
- normal: 기본값. 허용된 하이픈 넣기 지점에서만 줄 바꿈이 가능합니다(브라우저 예약됨).
- break-word: 긴 단어 또는 URL 주소 내부의 줄바꿈입니다.
적용 사례:
<style>
.break-word{
word-wrap:break-word;
}
</style>
<div style="width:100px;border:1px solid #000;">
<p class="break-word">这是一个很长很长很长的单词：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
위는 CSS3 논라인 래핑 기술의 소개 및 적용 예시입니다. 논라인 래핑 기술을 합리적으로 활용함으로써 페이지의 유연성을 높이고 디자인의 확장성을 높일 수 있습니다.
위 내용은 CSS3 비라인 래핑 기술 소개 및 적용 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.