CSS 텍스트 레이아웃 속성에 대한 자세한 설명: text-overflow 및 white-space

CSS 텍스트 레이아웃 속성에 대한 자세한 설명: 텍스트 오버플로 및 공백

웹 디자인에서 텍스트 레이아웃은 텍스트를 더 읽기 쉽고 아름답게 만드는 데 매우 중요한 링크입니다. CSS는 텍스트 오버플로 및 공백을 포함하여 텍스트 표시 방법을 제어하는 ​​여러 속성을 제공합니다. 이 문서에서는 이 두 속성의 사용법과 샘플 코드를 자세히 설명합니다.

1. text-overflow 속성

text-overflow 속성은 텍스트가 컨테이너를 초과할 때 표시되는 방식을 제어하는 ​​데 사용됩니다. 일반적인 값은 다음과 같습니다.

1. clip: 기본값, 컨테이너 너머 부분이 잘립니다.
2. 줄임표: 컨테이너 너머 부분은 줄임표(...)로 표시됩니다.
3. string: 표시되는 문자열을 맞춤설정할 수 있습니다.

샘플 코드는 다음과 같습니다.

<style>
  .container {
    width: 200px;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
  }
</style>

<div class="container">
  This is a long text that should be truncated with an ellipsis when it overflows.
</div>

위 코드에서는 컨테이너를 사용하고 너비를 200px로 설정하고 텍스트 내용을 긴 문장으로 설정했습니다. 공백 속성을 nowrap으로 설정하면 줄 바꿈이 강제로 적용되지 않으며, 오버플로 속성이 숨겨지므로 컨테이너 너머 부분이 숨겨집니다. 가장 중요한 것은 text-overflow 속성으로, 이를 줄임표로 설정했는데, 이는 초과 부분이 줄임표로 표시된다는 의미입니다.

2. 공백 속성

공백 속성은 공백 문자가 텍스트에서 처리되는 방식을 제어하는 ​​데 사용됩니다. 공통 값은 다음과 같습니다.

1. normal: 기본값, 공백 문자를 자동으로 처리하고, 연속된 공백 문자를 하나의 공백으로 병합하며, 줄 바꿈 및 탭도 공백으로 처리됩니다.
2. nowrap: 줄 바꿈을 강제하지 않고 연속된 공백 문자를 하나의 공백으로 병합합니다.
3. pre: 원래 공백을 유지하고 텍스트의 공백 형식을 유지합니다.
4. 사전 줄 바꿈: 원래 공백 문자를 유지하고 줄 바꿈을 허용하면 텍스트가 원래 형식으로 표시됩니다.
5. pre-line: 공백 문자를 자동으로 처리하지만 줄 바꿈을 유지하고 줄 바꿈을 허용하면 텍스트가 원래 형식으로 표시됩니다.

샘플 코드는 다음과 같습니다.

<style>
  .container {
    white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
  }
</style>

<div class="container">
  This is a long text that should wrap when it reaches the container's width.
</div>

위 코드에서는 컨테이너를 사용하고 공백 속성을 미리 줄 바꿈하도록 설정하여 텍스트가 원래 공백을 유지하고 줄바꿈을 허용하도록 했습니다.

텍스트 오버플로 및 공백 속성을 사용하면 텍스트 레이아웃을 보다 유연하게 제어하여 텍스트를 더욱 아름답고 읽기 쉽게 만들 수 있습니다. 실제 웹 디자인에서는 필요에 따라 적절한 값을 선택하고 샘플 코드를 기반으로 디버그할 수 있습니다.

요약:

text-overflow 및 white-space는 텍스트 레이아웃을 제어하는 ​​데 사용되는 CSS의 속성입니다. text-overflow는 텍스트가 컨테이너를 초과할 때 표시 방법을 제어하는 ​​데 사용됩니다. 공통 값은 클립, 줄임표 및 문자열이며, 공백은 텍스트에서 공백 문자가 처리되는 방식을 제어하는 ​​데 사용됩니다. ​​​노멀, 노랩, 프리, 프리랩, 프리라인이 있습니다. 이 두 가지 속성을 적절하게 적용하면 더 나은 텍스트 레이아웃 효과를 얻을 수 있습니다.

위 내용은 CSS 텍스트 레이아웃 속성에 대한 자세한 설명: text-overflow 및 white-space의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!