引导内容在网格中包装答案

【问题标题】：Bootstrap content wrapping in grid引导内容在网格中包装
【发布时间】：2016-02-07 03:14:19
【问题描述】：

我正在设计一个模板，设计的问题是当我调整浏览器的网格高度以适应其中的内容时，如下所示。

这是它的demo。

我使用了text-overflow 的属性，内容现在被包装了，但即使下面还有空间，它也只使用单行。

所以我想使用与image 相同的高度，而不是当我调整浏览器大小时text-overflow 属性应该像下面这样工作

我不确定我应该使用哪个css 属性，我很感激我能得到任何帮助来解决这个问题

谢谢

【问题讨论】：

我不明白这里有什么问题...这种做法非常糟糕，如果您正在为移动设备开发，则不需要那个屏幕，引导程序的媒体查询和它的字体大小。尝试更好地解释期望/不期望的行为

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

用 span class="text-nowrap" 将其包围。.text-nowrap 类是 Bootstrap 的文本对齐辅助类之一，包括：

.text-nowrap {
    white-space: nowrap;
}

【讨论】：

但不就是把一个大字打断，换到下一行吗？我想要的有点不同。

【解决方案2】：

您应该在容器内使用 css 属性 text-overflow: ellipsis;。

欲了解更多信息refer to MDN

【讨论】：

好的，它的工作原理很好，但是我如何修复剩余列的那个 div 的高度，以便它在 div 空间结束之前不会开始溢出？？

【解决方案3】：

试试这个将 .container-fluid 用于全宽容器，跨越视口的整个宽度。

div class="container-fluid"

【讨论】：

【解决方案4】：

ex.html

<section class="section-topic">
    <div class="container">
       <div class="row">
          <div class="topic-container col-3">
             <div class="topic-menu-1">
                <ul class="list-group"> 
                    <li></li>
                       ...                 
                  </ul>
                       ...

css 集；

  .section-topic .list-group {
    word-break: break-all;
    }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。