Question

我有一个<p>元素我想要修复它的位置，但是它里面的文字会变成单个单词，每个单词后面都有换行符。

例如：

<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;
}

但是文字是这样的：

Some
random
text
here

每个单词后都有换行符。

我希望文本不会分成垂直向下的单个单词，同时我希望<p>元素具有动态宽度，我不想设置固定的。

Answer 1

您可以在#daddy_comment

上添加此样式

位置：相对; 宽度：100％;

完整将是：

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

Answer 2

您可能希望在容器中添加宽度（'em'或'％'）。

 #daddy_cont {
    z-index: 10;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width:100%;
 }

根据文本长度固定位置动态

2 个答案: