通过css实现文本超出部分以省略号(......)代替
2015-12-14 11:19
609 查看
一、单行溢出
1,固定宽度(非常容易)
text-overflow: ellipsis;
2,不固定宽度
思路:想让这个区域成为块元素,然后不换行,溢出隐藏。
display: block;
white-space: nowrap: #设置如何处理元素内的空白。
text-overflow: ellipsis; #溢出隐藏
另外属性
white-space: nowrap; #用于处理元素内的空白,只在一行内显示。
word-wrap: break-word; #内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。
word-break:break-all; #用于处理单词折断。(注意与第一个属性的对比)
二、多行溢出
Css代码
.p{
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
1,固定宽度(非常容易)
text-overflow: ellipsis;
2,不固定宽度
思路:想让这个区域成为块元素,然后不换行,溢出隐藏。
display: block;
white-space: nowrap: #设置如何处理元素内的空白。
text-overflow: ellipsis; #溢出隐藏
另外属性
white-space: nowrap; #用于处理元素内的空白,只在一行内显示。
word-wrap: break-word; #内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。
word-break:break-all; #用于处理单词折断。(注意与第一个属性的对比)
二、多行溢出
Css代码
.p{
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
相关文章推荐
- 用JS控制CSS基本样式
- 用JS控制CSS基本样式
- QScrollBar样式设置了height后,QTableView、QComobox将不会显示垂直滚动条
- CSS布局note
- 前端中实现页内跳转和导航栏点击实现样式,点击其他消除样式并为这一项添加样式
- css命名书写规范小结。
- 你应该知道的9个优秀的CSS框架
- CSS中position属性之fixed实现div居中
- 网页中多个图标在一张图片上,使用css将各图标显示
- 通过设置CSS中的position属性来固定层的位置
- 【HTML+CSS】教你切图篇1-实现按钮
- 通过设置CSS中的position属性来固定层的位置
- CSS中position属性之fixed实现div居中
- css 入门
- html页面中打印样式
- FLEX4 CSS
- CSS三大特性(继承、优先级、层叠)之个人见解
- css基础box盒子
- CSS之图片旋转
- CSS3之变形处理