Learning website: Handling Long and Unexpected Content in CSS

Example 1: Text and icon overlap

Solution:

.button {
  padding-right: 50px;
}
Copy the code

Example 2: Long text in the label overlaps with the button

Solution:

add position: relative for the button. 
Copy the code

Example 3: Long words or hyperlinks

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.

Solution:

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

Or:

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

More of Jerry’s original articles can be found in “Wang Zixi” :