CSS 한 줄 텍스트 및 여러 줄 오버플로 텍스트의 줄임표 문제

텍스트 레이아웃 및 코드 작성 과정에서 텍스트 오버플로가 발생하는 경우가 많습니다. 다음은 한 줄 텍스트 오버플로 및 여러 줄 텍스트 오버플로 줄임표 처리를 요약한 것입니다.

1. 한 줄 텍스트 줄임표

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

<span style="color: #800000;">.text1</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;
}

다음은 한 줄 텍스트 오버플로에 대한 간단한 텍스트 예입니다.

여기서 너비 속성은 오버플로를 결정하기 위해 너비를 알아야 하기 때문에 필요합니다.

오버플로 속성은 넘친 텍스트를 숨기는 데 사용됩니다.

공백:

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

텍스트 오버플로:

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

둘. 여러 줄 텍스트 줄임표

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

<span style="color: #800000;">.text2</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">53px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
    -webkit-line-clamp</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;
}

여기서 위에서 말한 내용에 대해서는 더 이상 언급하지 않겠습니다.

여기서 height 속성과 Overflow 속성을 결합하여 줄임표 아래에 텍스트를 숨기는데, 추가하지 않고도 효과를 시도해 볼 수 있으며 한눈에 알 수 있습니다.

line-clamp 속성은 표시되는 텍스트 줄 수를 제어하는 ​​것입니다.

디스플레이 및 박스 오리엔트에 대해 여기서 간단히 이야기해 보겠습니다.

참고: 상자를 나누기 전에 표시 속성을 정의해야 합니다.

box-orient 속성은 상자 하위 요소를 가로 또는 세로로 정렬할지 여부를 지정합니다.

值	说明
horizontal	指定子元素在一个水平线上从左至右排列
vertical	从顶部向底部垂直布置子元素
inline-axis	子元素沿着内联坐标轴（映射到横向）
block-axis	子元素沿着块坐标轴（映射到垂直）
inherit	box-orient 属性的值应该从父元素继承

아직 이해가 되지 않는다면 URL: http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/을 방문하거나 w3c의 다양한 CSS 속성을 살펴보세요.