Why the width of the div tag is set, the text of the child element is still overflowed, and how to solve the problem

Why is the div tag width set, but the text of the child element is still overflowed

clipboard.png

clipboard.png

Mar.03,2021

 :overflow: hidden;

and

white-space: nowrap;

if it is a Chinese character, it will be displayed with new lines, but if you are all letters, the browser thinks that this is a word, so it is displayed on one line. You can use word-break:break-all; to force word breaks


to add overflow:hidden or overflow-x:hidden to hide out of bounds.
English words are distinguished by spaces, and there are no spaces. The browser thinks it is a word, which is displayed on the same line by default. If you add text-overflow:ellipsis, you should want to exceed it. Effect:
single-line text {overflow:hidden,text-overflow:ellipsis,white-space:nowrap};
multi-line text {overflow:hidden,text-overflow:ellipsis}

Menu