前端基础（5）：页面重构与文本溢出

最新推荐文章于 2025-10-30 18:34:45 发布

原创最新推荐文章于 2025-10-30 18:34:45 发布 · 631 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5 #javascript #js

本文介绍了前端开发中关于页面重构的关键点，包括如何处理文本溢出，如使用overflow属性来控制内容显示，调整white-space属性管理空余空间，以及利用text-overflow属性实现省略号效果。此外，还提到了CSS中选择器的特殊用法，如双class名的声明。

一、溢出属性（容器）

overflow:visible/hidden/scrol/auto/inhert;

说明：
visible:默认值
hidden：内容被修剪，并且其与内容不可见；
scroll：内容被修剪，浏览器显示滚动条，以便查看其余内容；
auto：如果内容被修剪，浏览器显示滚动条，以便查看其余内容；
inherit：从父元素继承overflow属性值；

二，空余空间

white-space:normal/nowrap/pre/pre-line/inherit;

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

三，省略号显示

text-overflow:clip/ellipsis

说明：
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；

*text-overflow属性仅是…，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义
要实现单行文本溢出时产生省略号的效果还需定义：

1、容器宽度、高度：width:value;height:value;
2、溢出内容为隐藏：overflow:hidden;
3、强制文本在一行内显示:white-space:nowrap;
4、溢出文本显示省略号：text-overflow:ellipsis;

四、双class名

<div class="box1 box2"></div>