如下图所示,想要的标题效果是只在一行内显示,但有点标题文字较多。在不使用字符截取的情况下,有没有办法通过Css Overflow控制文本超过宽度时,显示为点点…呢!

以下是实现方法:

  1. 元素类{
  2.         display: inline-block;
  3.         width: 80%;
  4.         white-space:nowrap;
  5.         text-overflow:ellipsis;
  6.         -o-text-overflow:ellipsis;
  7.         overflow:hidden;
  8. }

复制代码

注意: 以上CSS属性要配合使用不能缺少

white-space:nowrap     阻止文字换行
它的属性值有:
  normal 默认。空白会被浏览器忽略。
  pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
  nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
  pre-wrap 保留空白符序列,但是正常地进行换行。
  pre-line 合并空白符序列,但是保留换行符。
  inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow:ellipsis; 文字超出隐藏 且出现省略符号
它的属性值:
  clip :修剪文本。(效果和overflow 一样直接切掉)
  ellipsis:显示省略符号来代表被修剪的文本。

overflow:hidden;  这个想必是知道了,溢出时隐藏

来源:https://www.cnblogs.com/pineconeguo/p/10281444.html

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部