CSS 텍스트가 줄 바꿈을 초과합니다.

CSS 텍스트가 줄 바꿈을 초과합니다

웹 디자인에서 텍스트 내용이 상위 컨테이너를 초과하는 상황을 자주 접하게 됩니다. 이때 이 문제를 해결하려면 CSS를 사용해야 합니다. CSS는 줄 바꿈 및 텍스트 잘림을 제어하기 위한 몇 가지 속성을 제공합니다. 이 기사에서는 이러한 속성의 사용법과 실제 사례를 소개합니다.

1. 텍스트 줄 바꿈

텍스트 내용이 상위 컨테이너를 초과하는 경우 텍스트 줄 바꿈 방법을 제어하여 상위 컨테이너 내에서 자동으로 줄 바꿈할 수 있습니다. 일반적으로 사용되는 CSS 속성은 다음과 같습니다.

1. word-wrap

이 속성은 단어 내에서 줄 바꿈을 허용할지 여부를 지정하는 데 사용되며 기본값은 일반입니다. 이 속성의 값이 break-word인 경우, 단어의 길이가 컨테이너의 너비를 초과하면 해당 단어가 자동으로 분리되어 줄바꿈됩니다.

2. word-break

이 속성은 단어를 나누는 방법을 지정하는 데 사용됩니다. 기본값은 일반입니다. 이 속성의 값이 break-all이면 컨테이너의 너비를 초과하지 않더라도 단어라도 잘립니다.

다음은 예입니다:

<code class="css">.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div></code>

2. 텍스트 잘림

텍스트를 새 줄로 바꾸는 대신 텍스트 길이를 제한해야 할 때 텍스트 잘림을 사용할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 CSS 속성입니다.

1. overflow

이 속성은 상위 컨테이너의 콘텐츠가 컨테이너 크기를 초과할 때 동작하는 방식을 지정하는 데 사용됩니다. 기본값은 표시됩니다. 콘텐츠 너머의 부분이 숨겨지는 것을 의미하는 숨김으로 설정하거나 스크롤 막대가 표시되는 것을 의미하는 스크롤로 설정할 수 있습니다.

2. text-overflow

이 속성은 텍스트가 오버플로될 때 표시하는 방법을 지정하는 데 사용됩니다. 기본값은 클립입니다. 줄임표로 설정할 수 있습니다. 즉, 텍스트가 넘칠 때 줄임표가 자동으로 추가됩니다.

3. white-space

이 속성은 요소 내의 공백이 처리되는 방식을 제어하는 ​​데 사용됩니다. 기본값은 일반입니다. nowrap로 설정할 수 있습니다. 즉, "br" 태그가 발견되지 않는 한 텍스트가 줄 바꿈되지 않아야 함을 의미합니다.

다음은 예입니다.

<code class="css">.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会被截断并自动加上省略号。</p>
</div></code>

위는 줄바꿈을 초과하는 CSS 텍스트에 대한 해결 방법입니다. 모두에게 도움이 되기를 바랍니다. 실제 개발 프로세스에서는 실제 요구 사항에 따라 적절한 속성을 선택하여 최상의 결과를 얻을 수 있습니다.

위 내용은 CSS 텍스트가 줄 바꿈을 초과합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!