How can the CSS code of website construction do line breaking and its method?

We can often see that an element in a web page has words that exceed its own width. As a result, there will be a very long url, which will cause us an unsightly and troubled page. How can we solve this problem? Next, I will tell you how to deal with this problem.

1. You can use the forced line break symbol<br/>to break lines. Add<br/>at the place where the article needs to be wrapped to achieve automatic wrapping. As shown in the figure:

2. You can use the<p.>tag to achieve line breaking. If you need to break into new lines in an article, you can use the<p>tag to achieve new lines, but you should pay attention to the use of the p tag. As shown in the figure:

3. You can use CSS to set width auto wrap. We can add a div to a div and add a css style. You can set the corresponding css width for the added div to automatically wrap lines.

4. CSS is used for line breaking of continuous English letters and numbers. The used css attribute word wrap: break word attribute and value in word wrap. You may encounter this problem, but we use the third method to set the width to make the content line break, which is invalid for consecutive numbers and English. At this time, we need to set the css style of the corresponding div in the div css to force the line break element, word wrap: break word; Or word wrap: break all; Implement forced line break

5. The most violent way is to add overflow: hidden on the container; Can prevent text or anything from overflowing the container. Although it can solve the visual effect, it makes the text inaccessible.

The above are several ways of handling super long text overflow containers in css. I hope they can help you.

This article comes from Shangpin China: Website construction