Jquery中文网 > CSS教程 > 经典实例 > 正文 CSS 控制需隐藏的文字样式代码

CSS 控制需隐藏的文字样式代码

发布时间：2020-05-15 编辑：www.jquerycn.cn

jquery中文网为您提供CSS 控制需隐藏的文字样式代码等资源，欢迎您收藏本站，我们将为您提供最新的CSS 控制需隐藏的文字样式代码资源

文字隐藏我们都是要在一定情况下才会去做的，如果我一行不想让文字自动换行，这样我们就强制超出部份自动隐藏了。

在一个限定了高宽的容器中放入文字，当文字超出时就会出现杯具，简单的控制使用 CSS 即可；
观察了一下，使用四大金刚即可使此文字超出时自动截去末尾，并加上省略号：

代码如下	复制代码
.words{ width:200px; //限定宽度 white-space:nowrap; //强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 word-break:keep-all; //对于中文，韩文，日文，不允许字断开 text-overflow:ellipsis; //当对象内文本溢出时显示省略标记(...) overflow:hidden; //超出容器不显示 }

例

代码如下	复制代码
<div id="box" class="box">测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度</div> <br /> <button>white-space-nowrap</button> <button>word-break-keep-all</button> <button>overflow-hidden</button> <button>text-overflow-ellipsis</button> <h3>启用的 Classes:</h3> <p id="info"></p>

css

代码如下	复制代码
.box{line-height:22px; height:22px; width:200px; overflow:auto; border:1px solid #ccc; margin:10px;} .white-space-nowrap{white-space:nowrap;} .word-break-keep-all{word-break:keep-all;} .overflow-hidden{overflow:hidden;} .text-overflow-ellipsis{text-overflow:ellipsis;}

上一篇：CSS中 Float 的 clear:both 无效的解法下一篇：css list-style详细说明

[关闭]