Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Long words are flowing out of the box - How to prevent?

Tags:

html

css

overflow

I have a styled div where I need to add a long text. I have a maximum width ( 100px ) and I need to "make text go down". Now I can't find a solution for my problem: in case of long text, it goes out of the box. I don't have a height problem so it should take any size required.

This is my code:

<style>  
    .infobox { 
        -moz-background-clip: padding;     
        -webkit-background-clip: padding;  
        background-clip: padding-box;      
        border: 6px solid rgba(0,0,0,0.3);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px; 

        padding: 30px;
        width: 100px;
        text-align: center;

        top: 100px;
        left: 200px; 
    } 
</style> 

<div class="infobox"> LOOOOOOOOOOOOOOOOOOOOOOOOOOOONG TEXT :)</div>
like image 600
Matteo Mosconi Avatar asked Nov 24 '11 19:11

Matteo Mosconi


People also ask

What tool would stop the words from overflowing?

You can prevent text from overflowing to adjacent cells using the “Wrap Text” feature. Select the cell containing overflowing text and access the “Format Cells” dialog box as described earlier in this article. Click the “Alignment” tab and select the “Wrap text” check box so there is a check mark in the box.

How do I stretch text to fill a text box?

Click anywhere in the text. On the Format menu, point to AutoFit Text, and do one of the following: To reduce the point size of text until there is no text in overflow, click Shrink Text On Overflow. To shrink or expand text to fit in the text box when you resize the box, click Best Fit.


1 Answers

word-wrap: break-word; should help.

  • Supported in every browser that matters - caniuse.com
  • Read about it on CSS3.info
  • jsFiddle Demo - thanks to @Nacereddine
like image 193
kapa Avatar answered Nov 13 '22 18:11

kapa