Html Boostrap：文本从div溢出

我有以下标记，当我全屏查看页面时，它可以正常工作

，但当我减小浏览器的宽度时，它会溢出div

我在面板主体上使用了空白：正常，但不起作用。文本溢出：省略号也不起任何作用。我正在使用引导

<div class="col-sm-4">
    <section class="panel" style="background:#e74c3c; color:#FFF;">
        <div class="panel-body">
            COMPLAINT<br>
            8
        </div>
    </section>
</div>

---

您需要将

wordwrap:break-word.panel body

上的code>，但是这可能会使文本很难阅读。或者，您可以在

.col-sm-4

的容器上放置

最小宽度

，以防止其变得太小而无法容纳文本。

对于

文本溢出：省略号

要工作，您必须向该元素添加

溢出：隐藏

设置

---

若您使用单词break-break-all意味着单词将被截断，以便您可以在百分比值中提供适当的宽度，那个么问题也意味着使用文本溢出：省略号

例如：

.col-sm-4 {
  width: 30%;
  display: inline-block;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}

---

我在使用引导的Rails 6应用程序时遇到了这个问题：

我只是定义了一个自定义CSS类：

.remove_overflow {
  overflow: hidden;
}

并将自定义CSS类应用于表单元素：

<div class="form-group">
  <%= form.label :body %>
  <%= form.rich_text_area :body, class: 'form-control hide_overflow' %>
</div>

就这些

---

我希望这有帮助

您希望发生什么？它工作正常。你想要什么？像这样的？为

设置
min width
而不是
width
和
display:inline block
。如果文本太大，col-sm-4

将不会使元素变小，从而阻止文本溢出。我觉得这不是你想要的。默认情况下，

div

元素（或任何块）会占用尽可能多的空间，因此如果使用

minwidth

，它需要是一个

内联块。
.remove_overflow {
  overflow: hidden;
}

<div class="form-group">
  <%= form.label :body %>
  <%= form.rich_text_area :body, class: 'form-control hide_overflow' %>
</div>