欢迎来到豆沙资源网,请记住本站地址:www.xsdy168.com 以备不时之需

CSS强制不换行超过div部分长度采用省略号

搜点资源网 2020-3-26 综合资源 1

CSS强制不换行超过div部分长度采用省略号
场景描述:在条目列表中经常遇到,要求固定高度的一行文本,随着窗口页面的收缩或分辨率的调整,对该文本进行隐藏展示,超过部分采用省略号“...”来表示。

DIV基本原理:三行CSS代码

1、white-space:nowrap; white-space属性表示设置如何处理元素内的空白,nowrap表示文本不会换行,文本会在在同一行上继续,直到遇到标签为止。

2、overflow:hidden; overflow属性表示规定当内容溢出元素框时发生的事情hidden表示内容会被修剪,并且其余内容是不可见的。

3、text-overflow: ellipsis; text-overflow属性表示规定当文本溢出包含元素时发生的事情ellipsis表示显示省略符号来代表被修剪的文本。


<style>
.cmwlcm{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
width: 800px;
height: 30px;
line-height:30px;
font-family:'微软雅黑';
border:1px solid #e33;
}
</style>
<div class="cmwlcm">一句话:强制段落的文本不换行(满足条目列表的单行显示),超过部分隐藏不显示,隐藏部分采用省略号。一句话:强制段落的文本不换行(满足条目列表的单行显示),超过部分隐藏不显示,隐藏部分采用省略号。一句话:强制段落的文本不换行(满足条目列表的单行显示),超过部分隐藏不显示,隐藏部分采用省略号。一句话:强制段落的文本不换行(满足条目列表的单行显示),超过部分隐藏不显示,隐藏部分采用省略号。</div>


本文标签: 网页代码
  特别声明:文章多为网络转载,资源使用一般不提供帮助,特殊原创资源除外,如有侵权,不实,不妥请联系删除!

上一篇:鼠标经过卡片式突出显示图文详情js特效代码
下一篇:自定义美化HTML5 video视频播放器界面样式

发表留言:

同类推荐

  • 一组非常简约好看的CSS3汉堡包菜单图标按钮变形动画特效,汉堡包菜单图标在手机端APP或响应式设计上比较常见,一般用来展开和关闭网站导航菜单......