Html 如何使内联div内容不在换行符中拆分

我有一个消息div和一个日期字体在里面

但是，如果消息的内容很长，则日期将在换行符中拆分。我想做的是，如果没有日期的空间，应该全部放在下一行，而不是拆分

css

。消息{
宽度：500px；
空白：-moz预包装！重要；/*Mozilla，自1999年起*/
空白：-预包装；/*Opera 4-6*/
空白：-o形预包装；/*Opera 7*/
空白：预包装；/*css-3*/
换行：断开word；/*Internet Explorer 5.5+*/
空白：-webkit预包装；/*新版Chrome/Safari*/
单词break：打破一切；
空白：正常；
位置：相对位置；
}
.messagecontent{
显示：内联块；
}
.日期{
字体大小：11px；
颜色：#999；
左侧填充：5px；
}

---

我认为日期需要包含在messagecontent分区代码中：

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

---

尝试覆盖

日期

类上的

分词

和

换行

属性：

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

---

只需添加

空白：nowrap，可能它可以解决您的问题
.date {
  word-wrap: normal;
  word-break: normal;
}