How can I break up long words instead of overflowing?
How can I stop this text from overflowing?
<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>
&开发者_Go百科lt;/div>
</body>
</html>
I think word-wrap is supported in most browsers?
word-wrap:break-word;
Depends on what the desired output should be, but if you want to hyphenate the word, you can use ­, that is, replace "abcdefasdfasfasd", with say, abcdef­asdfasfasd.
You could also have a look at the overflow property.
does justify do it?
There's a CSS property called word-wrap. Give it the attribute "break-word" and you should be good to go.
.break-word {
word-wrap: break-word;
}
Source: Web Designer Wall - Force text to wrap
The css mentioned above won't work in all browser's as it's non-standard. When I run into this I usually use php's wordwrap function, but that's no good if you're not using php.
Two things which need to be pointed out: You've defined the height of the second element twice in the css. If you wrap text inside an element with a defined height, it could well overflow, and cause you a new set of problems.
加载中,请稍侯......
精彩评论