How to solve the overflow of text content in div

Sometimes when we edit content in a div, it will overflow, so what should we do if this happens? This article mainly introduces common solutions to text content overflow in p. Has very good reference value. Come and learn together.

Due to the uncertainty of the length of the text content and the fixedness of the page layout, text overflow is often encountered. Here is a solution:

1: Specify the width and height of the text parent container, and set it beyond hiding: overflo: "hidde"

-------The disadvantage is that the last line of text is often incompletely displayed. In this case, it is recommended to use

2 when only controlling the display of one line of text: css+p to prevent text from overflowing, the excess part becomes an ellipsis, and the line is displayed, white-space:nowrap;word-break: break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

------The disadvantage is that the Firefox browser does not perform well and will truncate , the page does not have a lot to hide, it is recommended to use

3: Use jQuery to limit the number of characters

$(document).ready(function(){
//限制字符个数
$(“.word_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
}
});
});

Related recommendations:

Overflow hiding: the most comprehensive solution to the content overflow problem using css

Summary of the content overflow problem caused by CSS floating and methods to clear the floating

jQuery implements the method of controlling text content overflow expressed by ellipsis (...)_jquery

The above is the detailed content of How to solve the overflow of text content in div. For more information, please follow other related articles on the PHP Chinese website!