单行、多行超出

单行

1
2
3
4
5
p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

多行

1
2
3
4
5
6
p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

判断单行文本是否溢出：比较scrollWidth是否大于offsetWidth

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function main() {
      let box = document.querySelector('.box')
      console.log("scrollWidth: ", box.scrollWidth)
      console.log("offsetWidth: ", box.offsetWidth)
      if (box.scrollWidth > box.offsetWidth) {
        console.log("出现了省略号")
      } else {
        console.log("没有出现省略号")
      }
    }
    main()
  </script>
基础知识
css

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！