CSS - 在不破坏单词的情况下打破行

时间:2013-09-16 13:16:16

标签: html5 css3

我正在处理内容管理,并且存在使用换行符创建的问题。我正在显示一些内容,它不会自动中断多行。所以我使用CSS属性“word-wrap:break-word”。

当我使用它时,线条会被制动,但它会切断行尾的单词。

我想打破一行而不是一个字。

有没有解决方案?

HTML

<div class="profile_fields">
 <ul>
  <li>
    <span id="CE_profile">Description:</span>
    <span>Join us in this 90 minute presentation and learn the indications and 
          "how to" for practical topics that will improve your diagnostic and
           treatment skills with cats. 
    </span> 
  </li>
 </ul>
</div>

CSS

.profile_fields {
    margin-top: 10px;
    overflow: hidden;
}
.profile_fields > ul {
    padding: 10px;
}
.profile_fields > ul > li > span + span {
    width: 330px !important;
    word-wrap: break-word;
}
.profile_fields > ul > li > span + span {
    display: block;
    float: none;
    min-width: 0;
    overflow: hidden;
    width: 380px;
}

我想在多行中打破第二个跨度的内容

小提琴:http://jsfiddle.net/fpTwP/

1 个答案:

答案 0 :(得分:0)

试试这个:

   word-break: keep-all;

有关css中单词破解的更多信息,请点击此处: http://docs.webplatform.org/wiki/css/properties/word-break