display:block/*内联对象需加*/
width:31em
word-break:keep-all/* 不换行 */
white-space:nowrap/* 不换行 */
overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/
一般的文字截断（适用于内联与块）：
.text-overflow {
display:block/*内联对象需加*/
width:31em
word-break:keep-all/* 不换行 */
white-space:nowrap/* 不换行 */
overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/
}
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，这个有两种解决方法一是用程序开截取字符长度，这个其实也是可以的
第二种是用样式来做,这里主要介绍一下用样式怎么来做吧，我话也不多说了吧直接上代码吧，
css样式如下：
[css]
.css1{
color:#6699ffborder:1px #ff8000 dashed
margin-bottom:20px
width: 20em/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden/*自动隐藏文字*/
text-overflow: ellipsis/*文字隐藏后添加省略号*/
white-space: nowrap/*强制不换行*/
width: 20em/*不允许出现半汉字截断*/
color:#6699ffborder:1px #ff8000 dashed
}
[/css]
html代码如下：
[html]
<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验</div>
[/html]
<st这yle type=”text/css”>
.css1{
color:#6699ffborder:1px #ff8000 dashed
margin-bottom:20px
width: 20em/*不允许出现半汉字截断*/
}
