Question

I have a <p> element I want to fix its position, but the text inside it becomes chunked into single words with a newline after every word.

For example:

<div id='daddy_cont'>
<img src='images/default/daddy.png'>
<div id='daddy_comment_cont'>
    <p id='daddy_comment'>Some random text here</p>     
</div>

css:

#daddy_cont {
    z-index: 10;
    position: fixed;
    left: 0px;
    bottom: 0px;
}
#daddy_comment_cont {
    position: absolute;
    left: 140px;
    bottom: 100px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

   -moz-box-shadow: 0px 0px 2px #4a4a4a;
   -webkit-box-shadow: 0px 0px 2px #4a4a4a;
   box-shadow: 0px 0px 2px #4a4a4a;    
}
#daddy_comment {
    font-size: 13px;
    line-height: 18px;
    padding: 10px;
    color: #333;
}

But the text comes out like this:

Some
random
text
here

with a newline after every word.

I want the text to not split into single words going down vertically, and at the same time I want the <p> element to have dynamic width, I don’t want to set a fixed with.

Answer 1

You can add this style on #daddy_comment

position: relative;
width: 100%;

the complete will be:

 #daddy_comment {
     font-size: 13px;
     line-height: 18px;    padding: 10px;
    color: #333;
    position: relative;
    width: 100%; }