CSS 한 줄 텍스트 및 여러 줄 오버플로 텍스트의 줄임표 문제
- WBOY원래의
- 2016-09-22 08:42:141119검색
텍스트 레이아웃 및 코드 작성 과정에서 텍스트 오버플로가 발생하는 경우가 많습니다. 다음은 한 줄 텍스트 오버플로 및 여러 줄 텍스트 오버플로 줄임표 처리를 요약한 것입니다.
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"> <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 속성은 상자 하위 요소를 가로 또는 세로로 정렬할지 여부를 지정합니다.
아직 이해가 되지 않는다면 URL: http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/을 방문하거나 w3c의 다양한 CSS 속성을 살펴보세요.
성명： 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. |