How to solve the problem of content overflowing the element box in front-end css
In CSS, there is an overflow attribute used to control the way content is displayed when it overflows the element box.
How to solve content overflowing element box?
- The first way is to increase the element box value, that is, increase the width and height values.
The css style of the above picture:
Increasing the width value of the div will solve the small problem of content overflowing.
- The second solution is that we add an attribute in css: Overflow
We want the words to be all in the blue area. Adding an attribute value like scroll to overflow in CSS solves a small problem for beginners who are new to front-end.
Before adding, the effect is like this:
After adding, the effect becomes like this:
This is the test code
.warp {
margin-left: 10px;
margin-top: 10px;
width: 500px;
height: 100px;
background-color: blue;
overflow: scroll;
}
<div class="warp">
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
前端css解决内容溢出元素框的办法<br>
</div>
Having mentioned the Overflow attribute, you might as well understand the meanings of the five values of this attribute.
- visible default value. The content will not be trimmed and will be rendered outside the element box.
- hidden content is trimmed and the remaining content is invisible.
- scroll The content will be trimmed, but the browser will display scroll bars to view the remaining content.
- auto If content is trimmed, the browser displays scroll bars to view the remaining content.
- inherit specifies that the value of the overflow attribute should be inherited from the parent element.
But one thing to note is that the overflow attribute only works on block elements with a specified height .