在web开发过程中,有时会出现一行显示信息过长,这样对用户的刻度性很差,所以可以考虑,当这一行超过容器允许宽度时,只显示一定长度,后面加上省略号,这样的话既可以将长文本显示在容器允许的宽度范围内,同时又能提示用户这个信息(长文本)没有显示完全。

具体的实现代码如下:

 

其中:width:20px-- 限定元素的长度,

           text-overflow:ellipsis :当前元素内长文本溢出时显示省略号(注意,这一属性必需和一下两个属性同时使用,否则效果不明确),

           white-space:nowrap:强制文本在一行内显示(有些元素在出现空格时会自动换行,这里通过改元素可以让问本在一行内强制显示),

           overflow:hidden:将溢出文本隐藏(否则会在一行内强制显示并超出容器宽度)。

至于将超长文本自动断词并换行,可以看该blog中的另一篇相关文章。

注:text-overflow:ellipsis不能在firefox中实现。

附:

text-overflow:clip | ellipsis

clip:不显示省略标记(...),而是简单的裁切

ellipsis:当对象向内文本溢出时显示省略标记(...)

 

长文本自动换行

只需要在style中加入word-wrap:break-word即可实现浏览器中长文本自动更新

Logo

云原生社区为您提供最前沿的新闻资讯和知识内容

更多推荐