CSS 텍스트 오버플로를 해결하는 방법

웹 디자인에서는 요소의 경계를 넘어서는 텍스트를 접하는 경우가 많습니다. 텍스트 오버플로는 디자인 레이아웃을 깨뜨리고 사용자 경험에 영향을 미칠 수 있지만, 좋은 CSS 지식은 이 문제를 해결하는 데 도움이 됩니다.

텍스트 처리 방법을 제어하는 ​​방법에는 실제로 여러 가지가 있으며 아래에서는 실제 예를 통해 소개합니다.

1. Ellipsis

Ellipsis는 가장 일반적으로 사용되는 텍스트 잘림 처리 방법으로, 한 줄 또는 여러 줄의 텍스트를 자르는 데 사용할 수 있습니다.

한 줄 줄임표

한 줄 텍스트가 혼잡한 상황에서는 텍스트 컨테이너 너비와 줄임표 스타일을 텍스트 너머로 설정하는 것이 해결책입니다.

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

코드에서 공백 속성은 nowrap으로 설정되어 있어 추가 공간을 만들지 않고도 텍스트가 한 줄에 표시됩니다. text-overflow: 줄임표를 사용하면 컨테이너 너비를 초과하는 컨테이너의 문자를 숨기고 컨테이너가 작을 때 줄임표로 바꿀 수 있습니다.

다줄 생략

다줄 텍스트가 경계를 초과하는 경우 줄 수를 설정하여 줄 수 범위 내에서 텍스트를 표시할 수 있습니다. 다음 CSS 속성을 적용할 수 있습니다.

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

이 코드에서는 display: -webkit-box 및 -webkit-box-orient: Vertical을 사용하여 텍스트 콘텐츠를 설정합니다. 세로 방향 Flexbox로 설정하고 -webkit-line-clamp 속성을 ​​설정하여 텍스트를 3줄로 제한합니다. 마지막으로 overflow:hidden을 사용하여 오버플로 텍스트를 제어하세요. display: -webkit-box 和 -webkit-box-orient: vertical 将文本内容设置为垂直方向的弹性盒子，并通过设置 -webkit-line-clamp 属性将文本限定为3行。最后，使用 overflow: hidden 控制任何超出的文本。

2. 滚动文本

另一个解决超出文本的方法是让它在文本容器内滚动。这个方法可以在文本容器中按预定义的速度自动滚动文本，让超出的文本得到适当的处理。以下是相应的 CSS 属性：

.text-scroll {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

在此设置中， white-space: nowrap 和 overflow: hidden 将文本限制为 1 行并且会限制任何超出的文本。animation 则定义了一个 marquee 动画， 将文本向左滚动， infinite 属性使文本永无止境地滚动。

3. 处理空格和连字符

另一种解决溢出文本的方法是通过处理空格和连字符。这可以确保文本不被截断且完整地呈现给用户。以下是相应的 CSS 属性：

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

在代码中 word-wrap: break-word 处理任何超出文本的单词或单字符，确保整个词或字符出现在下一行，并且它不会被破坏。 white-space: pre-wrap 将处理空格和连字符，确保它们的位置不会破坏文本内容。另外， word-break: break-all 和 overflow-wrap: break-word

텍스트 스크롤

텍스트가 넘쳐나는 또 다른 해결책은 텍스트 컨테이너 내부에서 스크롤되도록 하는 것입니다. 이 방법은 미리 정의된 속도로 텍스트 컨테이너의 텍스트를 자동으로 스크롤하여 초과 텍스트를 적절하게 처리할 수 있습니다. 해당 CSS 속성은 다음과 같습니다.

rrreee🎜이 설정에서 white-space: nowrap 및 overflow: hide는 텍스트를 1줄로 제한하고 텍스트 이외의 모든 항목을 제한합니다. animation은 텍스트를 왼쪽으로 스크롤하는 marquee 애니메이션을 정의하고 infinite 속성은 텍스트를 끝없이 스크롤하도록 만듭니다. 🎜
🎜공백 및 하이픈 처리 🎜🎜🎜넘치는 텍스트를 수정하는 또 다른 방법은 공백과 하이픈을 처리하는 것입니다. 이렇게 하면 텍스트가 잘리지 않고 사용자에게 완전히 표시됩니다. 해당 CSS 속성은 다음과 같습니다. 🎜rrreee🎜코드에서 word-wrap: break-word는 텍스트를 초과하는 모든 단어나 단일 문자를 처리하여 전체 단어나 문자가 다음 줄에 나타나도록 합니다. 그리고 그것은 파괴되지 않습니다. white-space: pre-wrap은 공백과 하이픈을 처리하여 배치로 인해 텍스트 내용이 깨지지 않도록 합니다. 또한 word-break: break-all 및 overflow-wrap: break-word 속성은 텍스트가 넘쳐 텍스트 영역의 디자인 레이아웃을 방해하지 않도록 보장합니다. 🎜🎜요약🎜🎜위의 CSS 기술을 사용하면 텍스트 오버플로 문제를 제어하고 해결할 수 있어 웹사이트와 애플리케이션에 더 부드럽고 더 나은 사용자 경험을 제공할 수 있습니다. 자신의 프로젝트에서 이러한 CSS 속성을 실험하면 확실히 사용자에게 더 나은 경험을 제공할 것입니다. 🎜

위 내용은 CSS 텍스트 오버플로를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!