CODEWITHSUNDEEP
htmlcss
lolalola
lolalola

Reputation: 3823

css, html show long words

i have box in right of page and i need show long words in left side. My problem is that long words jump after box. I add "word-wrap: break-word;" - but is the same.

Please look sample: http://jsfiddle.net/2dpcA/

<style>
.page{
    width: 380px;
    height: 600px;
    margin: 0 auto;
    background-color: #146A01;  
    word-wrap: break-word; 
}
.box{
    float: right;
    width: 200px;
    min-height: 200px;
    background-color: #336699;
}
</style>
</head>
<body>
    <div class="page">
        <div class="box">Some text</div>
        Lorem ipsum<br/>
        Lorem ipsum small text small tekst small<br/>
        VerylongTextIsHEREVerylongTextIsHEREV               
    </div>    
</body>

Upvotes: 2

Views: 481

Answers (3)

jim31415
jim31415

Reputation: 8818

Do you have control of the text that appears on the page?

If yes, then you might try inserting a soft hyphen in the long words. It indicates where an optional word break may occur.

aterriblylengthy&shy;longword

Upvotes: 0

Matt K
Matt K

Reputation: 6708

Use word-wrap and word-break in combination...

.page{
    width: 380px;
    height: 600px;
    margin: 0 auto;
    background-color: #146A01;
    word-wrap: break-word; /* Internet Explorer 5.5-7 */
    word-break: break-all; /* Internet Explorer 8-9 */
}

Take a look at this fiddle.

Upvotes: 0

Sotiris
Sotiris

Reputation: 40096

from the moment the container has a width bigger than long text's width, will place it where is possible without break it. One possible solution could be to wrap your big text with a span and then use the following css:

.page span {
    display: block;
    width: 180px;
    word-wrap: break-word;
}

Demo: http://jsfiddle.net/s6XjW/4/

Upvotes: 2

Related Questions