Welcome, Old Sport!

使用css截断过长文字

by ilikecss ON 2014/11/26 4428

使用css截断过长文字在网上经常可以看到文字段落过长或标题文字过长而导致部分省略截断,基于样式排版因素我们会在最后添加省略号作为截断注释。根据情况和需求不同, 有几种方法可以截断文字, 可以通过php截断,同样也可以使用javascript和css来完成。

原理很简单,对段落设置宽度,然后超过的部分用css作处理

CSS

h1 {
	width: 570px; /*设置宽度*/
	white-space: nowrap; /*段落不自动换行*/
	overflow: hidden;/*超过宽度隐藏*/
	text-overflow: ellipsis;/*文字省略号*/
}

Can i use…

浏览器支持参照: http://caniuse.com/#search=ellipsis

PS: 在IE7以下浏览时,光标选择省略部分有bug溢出!

7条评论
  1. #1

    有点蓝说道:

    好神奇的网站~

  2. #2

    顶固衣柜说道:

    就这么简单?

  3. #3

    做的不错说道:

    [做的不错,已收藏网址!]




TOP