CSS--text-overflow使用注意

  • 设置在块元素上。

  • text-overflow有两个属性值,clip和ellipsis。clip 表示不显示省略标记(…),而是简单的裁切;ellipsis代表当对象内文本溢出时显示省略标记(…)

  • 要想这两个属性起真正的作用,需要配合overflow:hidden;white-space:nowrap;使用。

  • overflow:hidden;代表着超出文本的部分不显示

  • white-space:nowrap;代表强制文本在一行显示。

  • 完整代码:
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    &必要的宽度限制

格式注意:

  • 一般文字是用一个span包裹,但是ellipsis不能写在span里,否则无效,要写在最近的包裹了span的div里面,必须最近,否则祖父级别以上的也无效,不会显示....

你可能感兴趣的:(CSS--text-overflow使用注意)