单行文本溢出显示打点

喜欢ヅ旅行 2022-05-23 02:30 225阅读 0赞

我们可以看到在许多网站上会出现图1这样的情况，实际内容要比标题长很多，但是只出现了一行文本，点开之后我们都会发现并不止这些文本，这里用到了css3中的一个小技术。这个技术就是接下来我们要了解的。

![70][]

1.首先我们要先学习一下需要用到的一些css属性

<table> 
 <tbody> 
 <tr> 
 <td>属性名</td> 
 <td>属性功能</td> 
 <td>用法</td> 
 </tr> 
 <tr> 
 <td>text-overflow</td> 
 <td>规定当文本溢出包含元素时发生的事情</td> 
 <td>这里修剪文本指的是处理溢出部分的文本 text-overflow:clip 修剪文本 text-overflow:ellipsis 若是溢出则显示省略符 text-overflow:string 用给定的字符串代替被修剪的文本</td> 
 </tr> 
 <tr> 
 <td>white-space</td> 
 <td>设置如何处理元素内的空白</td> 
 <td>white-space;nowrap 文本不会换行，文本会在在同一行上继续，直到遇到&lt;br&gt;标签为止</td> 
 </tr> 
 <tr> 
 <td>overflow</td> 
 <td>规定当内容溢出元素框时发生的事情</td> 
 <td>overflow:visible 默认值，不修剪，内容呈现在元素框之外 overflow:hidden 内容会被修剪，并且不可见 overflow:auto 如果内容被修剪，浏览器会显示滚动条方便查看</td> 
 </tr> 
 </tbody> 
</table>

2.我们了解一下这个小技术在各大网站的用途

(1).打开百度，右击后，打开检查

![70 1][]

(2).我们将取消overflow、white-space、text-overflow这三个属性，保存网页后打开会有什么变化

![70 2][]

(3).当我们取消这三个属性以后，我们就会发现，现在的文本会比之前的要长一些。

这就是因为overflowtext-overflow white-space的组合形成的效果

3.实现这个小技术

(1).首先我们先创建html文件

这里只给出body内部的代码，先创建一个p标签设置这个标签的class，用来关联样式

<pclass="cp">上海大学生资助诚信教育指数发布

(2).创建css文件

我们将利用这三个属性对段落进行修剪

首先设置html内的标签的内外边距

\*\{

margin: 0;

padding: 0;

最重要的修剪段落

**这里要注意一点，段落的宽度决定了这段文本是否换行，若是段落宽度太小，就会自动换行，我们要实现的是溢出部分显示省略符而不换行**

我们先设置一下元素的长度和高度

这里还要注意 white-space 、 overflow 、 text-overflow 的具体用法

要是不设置white-space为nowral，那么就不会溢出，因为多出的文本部分会实现自动换行。如果设置的话，多出的部分会溢出设置的宽度。

接下来我们要设置overflow和text-overflow

overflow处理的是溢出部分情况

text-overflow处理的是若是有溢出情况的发生，用什么来替代

我们在下面设置为溢出部分隐藏，且用省略号来表示有溢出部分

.cp\{

width: 200px;

line-height: 20px;

white-space: nowrap;

text-overflow:ellipsis;

overflow: hidden;

最终效果:

![70 3][]

[70]: /images/20220523/155166ab421a4c4ea9fa9243be65944a.png
[70 1]: /images/20220523/85a820088713490191925cb4f096c617.png
[70 2]: /images/20220523/0c204ddd4db34d0486120730dcaa0db3.png
[70 3]: /images/20220523/6851bf5191004eaf842f93820be68b94.png