Question

在实现自动换行后，Bootstrap列没有响应：break-word;

我正在使用引导CDN。

我实现了它，以防止描述文本超出该列的范围，但是有很多额外的空白。删除说明文字会导致该列具有响应性。

<div class="row">
    <div class="col-md-9 theborder stopoverflow">
        Description:
     {{event.description | safe}}
    </div>

这是我的CSS：

.stopoverflow {
    word-wrap: break-word;
}

Image of the issue

感谢您的帮助！

Answer 1

使用'word-break：break-all;'而不是'word-wrap：break-word'

断字：全部       无论是连续单词还是多个单词，“全部破坏”都将它们分解到宽度限制的边缘，即使在同一单词的字符内也是如此

自动换行：断词       这会将长字换行到下一行。       中断词可调整不同的词，以使它们不会在中间中断。

查看详细信息： https://www.w3.org/TR/css-text-3/#overflow-wrap-property

div {
  border: 1px solid ;
   width: 300px;
}

span {
  background-color: gray;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>
<div class="break-all">
 DASDSD <span>ASDASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
  </span> 
</div>
<br>
<b> word-wrap:break-word</b>

<div class="break-word">
  DASDSD <span>ASDASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
  </span> 
</div>

引导程序列无响应，换行后过长

1 个答案: