tags:

views:

52

answers:

5

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>
</div>
</body>
</html>
+1  A: 

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

You could also have a look at the overflow property.

aioobe
A: 

does justify do it?

Andrew Bullock
+3  A: 

I think word-wrap is supported in most browsers?

word-wrap:break-word;
Bigfellahull
A: 

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

Stuart Memo
A: 

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.

puppybeard