CSS3 비라인 래핑 기술 소개 및 적용 사례

CSS3 non-wrapping은 줄의 끝을 만나면 자동으로 줄 바꿈되지 않고 다음 줄로 계속 확장되도록 텍스트 내용에 스타일을 설정하는 것을 의미합니다. 이 기술은 한 줄의 텍스트나 코드 영역 등을 디자인하여 페이지를 더 깔끔하고 명확하게 만드는 데 자주 사용됩니다.

CSS3에는 줄 바꿈을 달성하기 위해 일반적으로 사용되는 두 가지 방법, 즉 공백과 단어 줄 바꿈이 있습니다. 다음으로 각각을 소개하고 적용 사례를 제시하겠습니다.

1. 공백

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

이 속성에는 다음과 같은 선택적 값이 있습니다.

1. normal: 기본값. 추가 공백을 무시하십시오.
2. nowrap: 텍스트가 줄바꿈되지 않습니다.
3. pre: 모든 공백과 줄 바꿈을 유지합니다.
4. pre-wrap: 모든 공백과 줄 바꿈을 유지하되 래핑합니다.
5. 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 속성은 줄 바꿈 시 너무 긴 단어를 잘라서 두 번째 줄에 배치할 수 있는지 여부를 지정하는 데 사용됩니다. 실제 응용 프로그램에서 더 좁은 컨테이너 너비를 설정할 때 단어가 잘리지 않고 줄 바꿈이 가능하도록 하려면 이 속성을 설정해야 합니다.

이 속성에는 다음과 같은 선택 값이 있습니다.

1. normal: 기본값. 허용된 하이픈 넣기 지점에서만 줄 바꿈이 가능합니다(브라우저 예약됨).
2. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!