html中文本溢出,CSS3 文本溢出(Text Overflow)

CSS3 文本溢出(Text Overflow)

CSS3的新文本属性可提供对文本呈现的更多指定。

在CSS3中处理文本溢出

CSS3引入了几个新的属性属性来修改文本内容,但是其中一些属性已经存在很长时间了。这些属性使您可以精确指定Web浏览器上文本的呈现。

隐藏溢出文本

例如,如果将空白元素的white-space属性值设置为nowrap,或者单个单词太长而无法容纳较长的电子邮件地址,则可能会导致文本溢出(例如,将其禁止换行)。 在这种情况下,可以使用CSS3 text-overflow属性来确定溢出文本内容的显示方式。

您可以显示或剪切溢出的文本,也可以剪切并在剪切文本的palace中显示省略号或自定义字符串,以指示用户。

该word-break属性接受的值为:clip、 ellipsis、string。

示例p {

width: 400px;

overflow: hidden;

white-space: nowrap;

background: #cdcdcd;

}

p.clipped {

text-overflow: clip; /* clipped the overflowed text */

}

p.ellipses {

text-overflow: ellipsis; /* display '…' to represent clipped text */

}测试看看‹/›

警告:大多数Web浏览器都不支持string该text-overflow属性的值,您最好避免这种情况。

中断溢出文本

您还可以使用CSS3 word-wrap属性将一个长单词打断,并使其换行,以使包含元素的边界溢出。

该word-wrap属性接受的值为:normal和break-word。

示例p {

width: 200px;

background: #ffc4ff;

word-wrap: break-word;

}测试看看‹/›

提示:请查看各个属性参考,以获取所有可能的值以及这些CSS属性的浏览器支持。

指定文本换行规则

您还可以使用CSS3 word-break属性自行指定文本的换行规则(即,如何在单词中换行)。

通过可接受的值word-break属性是:normal,break-all和keep-all。

示例p {

width: 150px;

padding: 10px;

}

p.break {

background: #bedb8b;

word-break: break-all;

}

p.keep {

background: #f09bbb;

word-break: keep-all;

}测试看看‹/›

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值