CSS 한 줄 텍스트 및 여러 줄 오버플로 텍스트의 줄임표 문제-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 22, 2016 am 08:42 AM

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

1. 한 줄 텍스트 줄임표

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><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 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 中的

 标签。</td>
</tr>
<tr>
<td>nowrap</td>
<td>文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。</td>
</tr>
<tr>
<td>pre-wrap</td>
<td>保留空白符序列，但是正常地进行换行。</td>
</tr>
<tr>
<td>pre-line</td>
<td>合并空白符序列，但是保留换行符。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 white-space 属性的值。</td>
</tr>
</tbody>
</table>
<p> 텍스트 오버플로:</p>
<table class="reference">
<tbody>
<tr>
<th>值</th>
<th>描述</th>
</tr>
<tr>
<td>clip</td>
<td>修剪文本。</td>
</tr>
<tr>
<td>ellipsis</td>
<td>显示省略符号来代表被修剪的文本。</td>
</tr>
<tr>
<td><em>string</em></td>
<td>使用给定的字符串来代表被修剪的文本。</td>
</tr>
</tbody>
</table>
<p>둘. 여러 줄 텍스트 줄임표 </p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><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 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 属性的值应该从父元素继承