Common Solutions of Text Content Overflow in div

Due to the uncertainty of the length of text content and the fixity of page layout, text overflow is often encountered. There are 1 solutions:

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

The disadvantage is that the last line of text is often not displayed completely. It is recommended to use it when only one line of text is controlled

2: css+div prevents text overflow, and the excess part becomes ellipsis, which is displayed in folded lines. white-space: nowrap; word-break: break-all; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;

The disadvantage is that Firefox browser implementation effect is not good, will be truncated, the page is not a lot of need to hide, recommended to use

3: Limit the number of characters with jQuery

$(document).ready(function(){
// Limit the number of characters 
$( " .word_overflow " ).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+' … ');
}
});
});