How to solve the problem of too long content in css

When you are writing CSS, you must have forgotten the critical situations in the design. For example, when the length of the content exceeds our expectations and we cannot explain the possibility, the page design is likely to collapse. We can't guarantee that CSS will always work as we expect, but at least we can test it with different types of content to reduce the chance of this happening.

The specific situation is as follows:

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

This is a switch button with an accordion effect. 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.

We can add enough padding value on the right side to adapt to the size of the icon

.button {
  padding-right: 50px;
}

Notice how we increased the padding value to create a safe display area for the icon, now we can Make sure button layout is no longer broken.

(Related tutorial recommendation: CSS tutorial)

Enter placeholder

When using floating annotations in our forum mode, especially when the button is on the right side, we need 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 there is information about the author's name on the right. What happens when the length of the information on the right is too long? There is no doubt that the layout will fall apart.

The problem here is that we only floated the image to the left, causing the author's name to move next to it, but this will only perform well if the author's name is shorter in length.

In order to make the page layout more adaptable, we need to increase the width of both elements. The more recommended way is to use flexbox, which is more suitable for such small components.

There are long links/words in the article

Sometimes the article contains some very long hyperlinks or words, which may not appear when the window is very wide causing problems. But on some smaller devices, such as phones or tablets, this can create annoying horizontal scroll bars.

We have two solutions to this problem:

(1) Using CSS word-break

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

word-break property does not perform well in different browsers The same, 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 for long links. For long words, I recommend using word-break.

Too long article tag

When we place an article tag on the card, we'd better determine its size only by setting its padding. When the content of the label is too long, programming the height and width may cause the layout to collapse.

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

Paragraph header with fixed link

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

When the title is too long, it may cause some problems. A better solution is to use flexbox layout, so that when there is not enough space, the link will be automatically squeezed into the next line.

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

The above technique is called 'Alignment Move Package'.

Recommended video tutorial: css video tutorial

The above is the detailed content of How to solve the problem of too long content in css. For more information, please follow other related articles on the PHP Chinese website!