如何使內聯div內容不分行換行

Question

我在裏面有一個消息div和一個日期字體。

然而，如果消息的內容較長時，日期被分裂於換行符。我想要做的是，如果沒有日期空間，它應該全部在下一行而不是分割。

CSS

.message { 
 
    width:500px; 
 
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
 
    white-space: -o-pre-wrap; /* Opera 7 */ 
 
    white-space: pre-wrap;  /* css-3 */ 
 
    word-wrap: break-word;  /* Internet Explorer 5.5+ */ 
 
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ 
 
    word-break: break-all; 
 
    white-space: normal; 
 
    position:relative; 
 
} 
 
    
 
.messagecontent { 
 
    display: inline-block; 
 
} 
 
    
 
.date { 
 
    font-size:11px; 
 
    color:#999; 
 
    padding-left:5px; 
 
}

<!-- HTML --> 
 

 
<div class="message"> 
 
    <div class="messagecontent"></div> 
 
    <font class="date"></div> 
 
</div>

什麼是做正確的方法是什麼？

Answer 1

我認爲這個日期需要包含在messagecontent div中。代碼：

<div class="message"> 
    <div class="messagecontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mollis felis eget accumsan aliquet. Mauris semper id tortor et tristique. Cras mi ante, euismod in luctus id, hendrerit vel elit.<div class="date">13:12</div></div> 
</div> 

，並設置爲inline-block的：

.date { 
    font-size:11px; 
    color:#999; 
    padding-left:5px; 
    display: inline-block; 
} 

Answer 2

嘗試在.date類中重寫word-break和word-wrap屬性：

.date { 
    word-wrap: normal; 
    word-break: normal; 
}