html怎样让超出的内容显示为省略号?

如题所述

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法\x0d\x0a一是用程序开截取字符长度,这个其实也是可以的\x0d\x0a第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧,\x0d\x0a \x0d\x0acss样式如下:\x0d\x0a[css]\x0d\x0a.css1{\x0d\x0acolor:#6699ff;border:1px #ff8000 dashed;\x0d\x0amargin-bottom:20px;\x0d\x0awidth: 20em;/*不允许出现半汉字截断*/\x0d\x0a}\x0d\x0a.css2 {\x0d\x0aoverflow: hidden; /*自动隐藏文字*/\x0d\x0atext-overflow: ellipsis;/*文字隐藏后添加省略号*/\x0d\x0awhite-space: nowrap;/*强制不换行*/\x0d\x0awidth: 20em;/*不允许出现半汉字截断*/\x0d\x0acolor:#6699ff;border:1px #ff8000 dashed;\x0d\x0a}\x0d\x0a[/css]\x0d\x0a \x0d\x0ahtml代码如下:\x0d\x0a[html]\x0d\x0aWeb前端开发 _ 专注于网站前端设计与Web用户体验\x0d\x0aWeb前端开发 _ 专注于网站前端设计与Web用户体验\x0d\x0a[/html]\x0d\x0a\x0d\x0a.css1{\x0d\x0acolor:#6699ff;border:1px #ff8000 dashed;\x0d\x0amargin-bottom:20px;\x0d\x0awidth: 20em;/*不允许出现半汉字截断*/\x0d\x0a}\x0d\x0a.css2 {\x0d\x0aoverflow: hidden; /*自动隐藏文字*/\x0d\x0atext-overflow: ellipsis;/*文字隐藏后添加省略号*/\x0d\x0awhite-space: nowrap;/*强制不换行*/\x0d\x0awidth: 20em;/*不允许出现半汉字截断*/\x0d\x0acolor:#6699ff;border:1px #ff8000 dashed;\x0d\x0a}\x0d\x0a\x0d\x0aWeb前端开发 _ 专注于网站前端设计与Web用户体验\x0d\x0aWeb前端开发 _ 专注于网站前端设计与Web用户体验\x0d\x0a

温馨提示:答案为网友推荐,仅供参考