css单行文本与多行溢出文本的省略号问题-html教程-PHP中文网

css单行文本与多行溢出文本的省略号问题

php中文网

发布： 2016-09-22 08:42:14

原创

1342人浏览过

在文字布局和代码编写过程中遇到文本溢出是常有的事，下面总结一下对于单行文本溢出和多行文本溢出省略号的处理。

一。单行文本省略号

<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>;
}

登录后复制

这里拿一段简单的文字示例单行文本溢出：

　　这里的width属性是必须的，因为需要知道它的宽度是多少，才能判断溢出；

　　overflow属性使为了隐藏溢出的文本；

立即学习“前端免费学习笔记（深入）”；

　　white-space:

值

描述

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>　　text-overflow:</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>;
}

登录后复制

上面说过的在这里就不再多说了。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本，大家可以试一下不加的效果，就一目了然了。

line-clamp属性是为了控制文本显示多少行。

关于display和box-orient，在这里简单说一下：

　　说明：必须定义display属性才可以对box进行划分。

　　box-orient 属性指定一个box子元素是否应按水平或垂直排列。

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

如果还是不太明白，大家可以访问网址：http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/或在w3c里看css各个属性。

大家都在看：

html函数如何设置元素样式属性 html函数结合CSS的内联技巧 html代码怎么框架_html框架标签使用方法与iframe嵌入代码教程如何通过Sublime Text解决HTML性能瓶颈的详细教程 CSS样式怎么直接嵌入HTML_CSS样式直接嵌入HTML的快速教程如何在IDLE中处理简单HTML编辑的解决办法