linebox without space overflows from the width of its parent element

Question

<!DOCTYPE HTML>
<html>
<head>
<style>
    #test{
        width: 10px;
        background-color: blue;
    }
</style>
</head>
<body>


<p id="test">a a a a a a a a a</p>

In this example linebox follows the width of the #test

<!DOCTYPE HTML>
<html>
<head>
<style>
    #test{
        width: 10px;
        background-color: blue;
    }
</style>
</head>
<body>


    <p id="test">aaaaaaaaaaaaaaaaa</p>


</body>
</html>

but with this second code the linebox overflows from the width of the #test

what the deal with the space between linebox

score 1 · Accepted Answer · answered Oct 15 '12 at 02:20

1

I think you can use

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

DEMO and see this too.

answered Oct 15 '12 at 02:20

The Alpha

143,660
29
287
307

but what is the explanation in my question is it because "word-wrap:break-word" is not the default? – user1745031 Oct 15 '12 at 02:22
In the second example you have a long line without any space. – The Alpha Oct 15 '12 at 02:26
@user1745031, [Here is another answer, could be useful](http://stackoverflow.com/questions/363425/how-to-wrap-long-lines-without-spaces-in-html). – The Alpha Oct 15 '12 at 02:27
yes i understand what you want to say, but that is not my question that is only a solution. – user1745031 Oct 15 '12 at 02:29
@user1745031, I think I didn't understand the question, anyway. – The Alpha Oct 15 '12 at 02:30
my question is basically why when I do this it act like this, I wonder if you know the reason behind the scenes. – user1745031 Oct 15 '12 at 02:32
@user1745031, welcome. [This may help you](https://developer.mozilla.org/en-US/docs/CSS/word-wrap). – The Alpha Oct 15 '12 at 02:37
thanks for that last link now I know the answer in my question is because word-wrap:normal is the default. BTW can I download documentation about css so that I can view it online? – user1745031 Oct 15 '12 at 02:42
@user1745031, You are welcome and [here is a search result](https://www.google.com/search?q=display+mouse+position+on+chrome+inspector&oq=display+mouse+position+on+chrome+inspector&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8#hl=en&sclient=psy-ab&q=download+css+tutorials&oq=download+css+tutorials&gs_l=serp.3...548.2725.1.3886.9.9.0.0.0.3.750.1943.5-2j1.3.0.les%3B..0.0...1c.1.NGzL9z3pC-M&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&fp=404a22c07aaf118a&bpcl=35277026&biw=1280&bih=681). – The Alpha Oct 15 '12 at 02:46

linebox without space overflows from the width of its parent element

1 Answers1