如何使内联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

尝试覆盖word-break类的word-wrap和.date属性：

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