Detailed explanation of how to solve the problem of too long content in CSS

When we write CSS, we sometimes forget about the critical cases that exist in our designs. For example, when the length of the content exceeds our expectations and we cannot account for the possibility, the design of the page is likely to break. We can’t guarantee that CSS will always work the way we expect, but at least we can test it with different types of content to reduce the chances of this happening.

In this article, we examine various UI issues on real websites to explain why these websites might break. Are you ready? bring it on!

A button with a small icon on the right/left side

This is an accordion on/off button. There is a small icon to the right of the button to emphasize that it is clickable. However, when the button area is not long enough, the text on the button will cover the icon. This can happen when we don't take longer content into account.

One solution is to add enough padding on the right to accommodate the icon size.

.button {
  padding-right: 50px;
}

Notice how we increased the padding to create a safe area for the icon to appear. Now we can be sure that the button layout will not be disrupted.

Input placeholder

When using floating callout mode in our forum, especially when the button is on the right side, we need to conduct sufficient testing to avoid problems caused by too long placeholders.

One solution is to add position: relative to the button, which will make the button cover the placeholder.

Long name

In this design, the image floats to the left and the author’s name is on the right. What happens when the information on the right is too long? There is no doubt that the layout will collapse.

The problem here is that we only floated the image to the left, which moves the author’s name next to it, but this only works well if the author’s name is short.

To make the page layout more adaptable, we need to increase the width of both elements. A more recommended approach is to use flexbox, which is more suitable for small components like this.

There are long links/words in the article

Sometimes articles contain very long hyperlinks or words that may not cause problems when the viewport is wide. But on smaller devices, such as phones or tablets, this may result in annoying horizontal scroll bars.

We have two solutions to this problem:

1) Use CSS word-break

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

The word-break property behaves differently in different browsers, so it needs to be fully tested when using it.

2) Add overflow and text-overflow to the outer element

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

This solution is more friendly to long links. For long words, I recommend using word-break.

Too long article tags

When we place an article label on a card, we would ideally size it just by setting its padding. When the content of the label is too long, hard-coding the height and width may cause the layout to collapse.

You can also set a minimum width for the label. When you use the min-width attribute on the label content element wrapped by padding, the width changes dynamically and the problem is solved.

Section header with permalink

This example has a 'view more' link to the right of the paragraph heading. There are a few different ways to write CSS, one of which is to use absolute positioning for links.

This can cause problems when the title is too long. A better solution is to use a flexbox layout, which will automatically squeeze the link to the next line when there is not enough space.

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

The above technique is called 'aligned mobile parcels'.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.