.sticky { back...">
All geek questions in one place

How can I break long words instead of overflowing?

How can I stop this text due to overflow?

<html> <head> <style type="text/css"> .sticky { background-color: #FCFC80; margin: 5px; height: 100px; width: 135px; } .sticky .edit { vertical-align:middle; height: 100px; position:relative; color:Black; background-color:blue; height:90px; vertical-align:middle; width:90px; border-collapse:collapse; } </style> </head> <body> <div id="note44" class="sticky"> <div id="text44" class="edit" title="Click to edit" style="">A very long word: abcdefasdfasfasd</div> </div> </body> </html>
+4
source share
5 answers

I think word wrap is supported in most browsers?

 word-wrap:break-word;
+5
source

It depends on what the desired output should be, but if you want to expand the word, you can use &shy; , that is, replace "abcdefasdfasfasd" , say, abcdef&shy;asdfasfasd .

You can also see the overflow property.

+1
source

does justify do it?

0
source

There is a CSS property called word-wrap. Give it a break-word attribute and you should be good to go.

 .break-word { word-wrap: break-word; }

Source: Web Designer Wall - Text Formatting

0
source

The above css will not work in all browsers as it is non-standard. When I come across this, I usually use the php wordwrap function, but that is not good if you are not using php.

Two things to indicate: You have determined the height of the second element twice in css. If you wrap text inside an element with a certain height, it can become very full and cause a new set of problems.

0
source

Source: https://habr.com/ru/post/1310105/

More articles:


All Articles