使用CSS属性处理前端开发中长文本造成的内容显示重叠问题

学习网站：Handling Long and Unexpected Content in CSS

例1：文本和图标(accordion)重叠

解决方案：

.button {
  padding-right: 50px;
}

例2：label里的长文本和button重叠

解决方案：

add position: relative for the button. 

例3：过长的单词或者超链接

Sometimes there are long links or words in an article. This might not cause an issue with a very wide viewport. But for smaller sizes like mobile or tablet, this will cause a horizontal scrolling and it will be annoying.

解决方案：

.article-body p {
  word-break: break-all;
}

或者：

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

更多Jerry的原创文章，尽在：“汪子熙”: