html - 添加空白 pre 后文本在 bootstrap 中超出 div

Question

我有一个 div，它将显示来自多行文本字段的内容

<div class="col-sm-12">
      <span class="description ng-binding">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Nam porttitor varius tortor..
      </span>           
</div>

描述div有时需要显示多行文字。但它在一行中显示内容而忽略了下一行(新)。所以我添加了下面的 css

.description {
    white-space: pre;
}

添加后，显示为多行。但现在的问题是，如果该行很大，那么它会超出父 div 而不会包含在 div 中。

我尝试按照建议添加以下 css here , 但它没有用

.description {
    white-space: pre;
    max-width: 98%;
    text-overflow: ellipsis;
    word-break: break-word;
}

我错过了什么？

Answer 1

我将 css 从 white-space:pre 更改为 white-space:pre-wrap 并且有效

.description{
    white-space: pre;
}