user3304007 user3304007 - 2 months ago 6
CSS Question

How to make inline div content not splitted in line break

I have a message div and a date font inside.

enter image description here

However, if the content of the message is long, the date is being splitted in line break. What I want to do is, if there is no space for date, it should be all in the next line instead of split.

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>





What is the correct way to do that ?

Answer

I think that the date will need to be included in the messagecontent div. code:

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

and set to inline-block:

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