Когда текст в теге <p>
слишком длинный, он выглядит следующим образом: как предотвратить это с помощью CSS? Я пробовал свойство CSS word-break: break-all;
, но Firefox и Opera не поддерживают это свойство, и кроме этого другие "нормальные" слова также ломаются. Поэтому я хочу сломать только очень длинные слова, но не короткие слова, в зависимости от ширины белого <div>
.
body {
background-color: #ccc;
}
h2 {
float: left;
color: #525254;
margin: 0px;
font: bold 15px Arial, Helvetica, sans;
}
.post {
background-color: #fff;
float: left;
clear: both;
padding: 20px;
width: 500px;
border-bottom: solid 1px #ddd;
}
.post_cell {
display: table-cell;
vertical-align: middle;
}
.post_body {
display: table-cell;
width: 400px;
opacity: 0.8;
}
.profile_img {
border: solid 3px #ccc;
width: 48px;
height: 48px;
margin: 0px 15px;
}
.post_info {
color: #c3c3c3;
font: normal 12px Arial, Helvetica, sans;
margin-left: 8px;
}
a.no_style {
color: inherit;
text-decoration: inherit;
font: inherit;
}
p {
float: left;
clear: both;
color: #525254;
margin: 0px;
padding: 0px;
line-height: 18px;
font: normal 15px Arial, Helvetica, sans;
word-wrap: break-word;
}
<div class="post">
<div class="post_cell">
<input type="checkbox" />
</div>
<div class="post_cell">
<img class="profile_img" src="" height="48">
</div>
<div class="post_body">
<div class="post_details">
<h2>
<a href="javascript:void(0)" target="_blank" class="no_style">user</a>
</h2>
<span class="post_info">
<span class="passed_time">15 hours ago</span> |
<a href="javascript:void(0)" class="no_style">3 Comments</a>
</span>
</div>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>