웹 디자인에서는 요소의 경계를 넘어서는 텍스트를 접하는 경우가 많습니다. 텍스트 오버플로는 디자인 레이아웃을 깨뜨리고 사용자 경험에 영향을 미칠 수 있지만, 좋은 CSS 지식은 이 문제를 해결하는 데 도움이 됩니다.
텍스트 처리 방법을 제어하는 방법에는 실제로 여러 가지가 있으며 아래에서는 실제 예를 통해 소개합니다.
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
控制任何超出的文本。
另一个解决超出文本的方法是让它在文本容器内滚动。这个方法可以在文本容器中按预定义的速度自动滚动文本,让超出的文本得到适当的处理。以下是相应的 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
属性使文本永无止境地滚动。
另一种解决溢出文本的方法是通过处理空格和连字符。这可以确保文本不被截断且完整地呈现给用户。以下是相应的 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
속성은 텍스트를 끝없이 스크롤하도록 만듭니다. 🎜word-wrap: break-word
는 텍스트를 초과하는 모든 단어나 단일 문자를 처리하여 전체 단어나 문자가 다음 줄에 나타나도록 합니다. 그리고 그것은 파괴되지 않습니다. white-space: pre-wrap
은 공백과 하이픈을 처리하여 배치로 인해 텍스트 내용이 깨지지 않도록 합니다. 또한 word-break: break-all
및 overflow-wrap: break-word
속성은 텍스트가 넘쳐 텍스트 영역의 디자인 레이아웃을 방해하지 않도록 보장합니다. 🎜🎜요약🎜🎜위의 CSS 기술을 사용하면 텍스트 오버플로 문제를 제어하고 해결할 수 있어 웹사이트와 애플리케이션에 더 부드럽고 더 나은 사용자 경험을 제공할 수 있습니다. 자신의 프로젝트에서 이러한 CSS 속성을 실험하면 확실히 사용자에게 더 나은 경험을 제공할 것입니다. 🎜위 내용은 CSS 텍스트 오버플로를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!