一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > css教程 > 常用代码

推荐专题

最新下载

热门教程

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

时间：2022-06-25 09:38:41 编辑：袖梨 来源：一聚教程网

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

 代码如下 复制代码

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

例

 代码如下 复制代码

测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度







启用的 Classes:

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

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理