html css 不换行 省略,css强制不换行超出省略号如何设置?

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

08ad638116c9925366a3f43c2ea5c076.png

css设置强制不换行超出显示省略号:

div.test

{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid #000000;

}

下面的 div 包含无法在框中容纳的长文本。正如您所见,文本被修剪了。

这个 div 使用 "text-overflow:ellipsis" :

强制不换行,超出显示省略号。

强制不换行,超出显示省略号。

强制不换行,超出显示省略号。

效果如下:

ff51b4107338ea3980825b071901658c.png

说明:

white-space: nowrap;样式强制文本不换行,white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。

text-overflow:ellipsis;样式设置文本超出显示省略号。

text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis显示省略符号来代表被修剪的文本。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值