Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to solve the problem of too long content in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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

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

.button {

Padding-right: 50px

}

Notice how we increase the padding value to create a safe display area for the icon, and now we can make sure that the layout of the button will not be broken again.

Enter placeholder

When using floating annotation mode in our forums, especially when the button is on the right, we need adequate testing to avoid problems caused by too long placeholders.

One workaround is to add position: relative to the button, which overrides the placeholder.

Long name

In this design, the picture floats to the left, with the author's name on the right. What happens when the length of the message on the right is too long? There is no doubt that the layout will collapse.

The problem here is that we only float the image to the left so that the author's name is moved to it, but this only works well when the author's name is short.

To make the page layout more adaptable, we need to add width to both elements. A 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 these long hyperlinks or words, which may not cause problems when the window is wide. But for smaller devices, such as phones or tablets, this can produce annoying horizontal scrollbars.

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 elements

. article-body p {

Overflow: hidden

Text-overflow: ellipsis

}

This solution is friendly for long links, but for long words, I recommend using word-break.

Excessively long article tags

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

You can also set a minimum width for the tag, and when you use the min-width attribute on the tag content elements of the padding package, the width is dynamic, and the problem is solved.

Segment head with fixed link

In this example, there is a 'view more' link on the right side of the paragraph title. There are several 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 the flexbox layout, so that when there is not enough space, the link will be automatically pushed to the next line.

.header-2 {

Display: flex

Flex-wrap: wrap

Justify-content: space-between

Align-items: center

}

The above technique is called 'align moving packages'.

This is the end of the content of "how to solve the problem of too long content in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.