如何使内联div内容不在换行符中拆分
如何使内联div内容不在换行符中拆分
提问于 2016-09-10 19:33:35
我里面有一个消息div和一个日期字体。
但是，如果消息的内容很长，则日期将以换行符的形式拆分。我想做的是，如果没有date的空间，它应该全部放在下一行，而不是拆分。
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>
这样做的正确方法是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-10 19:43:04
我认为日期需要包含在messagecontent _ included _ 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;
}Stack Overflow用户
发布于 2016-09-10 19:52:15
尝试覆盖.date类的word-break和word-wrap属性：
.date {
word-wrap: normal;
word-break: normal;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39425604
复制相关文章
相似问题
腾讯云开发者
