CSS少见问题集

写在最前面

　　前端开发经常与css打交道，本人在过往的开发过程中遇到了许多CSS相关的奇奇怪怪的问题，本篇随笔用于（持续）记录遇到的问题及解决办法。

　　本随笔仅仅针对某一些问题或需求的个人经验记录，不适合被用于学习。并且由于汇总了各种奇奇怪怪有趣的经验，本篇也不适合被用于检索&解决问题因为内容杂乱，如果仅仅想在本篇中查找是否有关于某一问题的解决办法可能会耗费您大量的时间（有很大可能因为本人开发经验有限，并没有该问题的记录）。

超出指定行省略

超出指定宽度隐藏，并显示省略号。这是有过前端开发经验的朋友门都比较熟知的，通过以下代码即可实现：

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果要实现控制，超出指定行省略，以下是本人用过比较舒服的方式：

.text {
  width: 100px; //非必要
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;//任意要控制显示的行数
}

 

 

标签：问题,本篇,text,少见,break,webkit,overflow,hidden,CSS
来源： https://www.cnblogs.com/famousPassersby-jone/p/15826070.html