bootstrap 3 将文本内容包装在 div 中以进行水平对齐答案

【问题标题】：bootstrap 3 wrap text content within div for horizontal alignmentbootstrap 3 将文本内容包装在 div 中以进行水平对齐
【发布时间】：2014-07-01 18:09:24
【问题描述】：

我在这里的帖子标题可能会产生误导。首先看看我目前拥有的 HTML：

如您所见，每一列的文本内容都会溢出到下一列。其次，它们中的每一个都不是水平对齐的。（例如view details 的链接不对齐）。无论文本长度如何，我都希望它们笔直对齐。

这是我的 HTML 代码：（这里的内容是动态生成的。所以项目的数量会有所不同）。我在我的代码中使用 bootstrap 3。

<div class="row" style="box-shadow: 0 0 30px black;">


      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2005 Volkswagen Jetta 2.5 Sedan (worcester   http://www.massmotorcars.com) $6900</h3>
        <p>
          <small>2005 volkswagen jetta 2.5 for sale has 110,000 miles powere doors,power windows,has ,car drives excellent ,comes with warranty if you&#39;re ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1355/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1355" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
      <!--/span-->
      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2006 Honda Civic EX Sedan (Worcester www.massmotorcars.com) $7950</h3>
        <p>
          <small>2006 honda civic ex has 110,176 miles, has power doors ,power windows,sun roof,alloy wheels,runs great, cd player, 4 cylinder engen, ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1356/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1356" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
      <!--/span-->
      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2004 Honda Civic LX Sedan  (worcester www.massmotorcars.com) $5900</h3>
        <p>
          <small>2004 honda civic lx sedan has 134,000 miles, great looking car, interior and exterior looks nice,has cd player, power windows ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1357/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1357" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
</div>

【问题讨论】：

w3schools.com/cssref/css3_pr_word-break.asp

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

【解决方案1】：

将以下样式添加到您的 h3 元素中：

word-wrap: break-word;

这将导致其中的长 URL 换行。 word-wrap 的默认设置是 normal，它只会在 URL 中不存在的一组有限的拆分标记（例如空格、连字符）处换行。

【讨论】：

【解决方案2】：

现在更新自动换行被替换为：

overflow-wrap:break-word;

兼容旧导航器和 css 3 是不错的选择！

它是自动换行的演变（自 2012 年以来...）

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

查看兼容性完整： http://caniuse.com/#search=overflow-wrap

【讨论】：

【解决方案3】：

您的代码使用 bootatrap v3.3.7 可以正常工作，但如果您的代码无法正常工作，您可以使用 word-break: break-word。

然后看起来像这样 -

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div class="row" style="box-shadow: 0 0 30px black;">
        <div class="col-6 col-sm-6 col-lg-4">
            <h3 style="word-break: break-word;">2005 Volkswagen Jetta 2.5 Sedan (worcester http://www.massmotorcars.com)
                $6900</h3>
            <p>
                <small>2005 volkswagen jetta 2.5 for sale has 110,000 miles powere doors,power windows,has ,car drives
                    excellent ,comes with warranty if you&#39;re ...</small>
            </p>
            <p>
                <a class="btn btn-default" href="/search/1355/detail/" role="button">View details &raquo;</a>
                <button type="button" class="btn bookmark" id="1355">
                    <span class="
                      glyphicon glyphicon-star-empty "></span>
                </button>
            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
            <h3 style="word-break: break-word;">2006 Honda Civic EX Sedan (Worcester www.massmotorcars.com) $7950</h3>
            <p>
                <small>2006 honda civic ex has 110,176 miles, has power doors ,power windows,sun roof,alloy wheels,runs
                    great, cd player, 4 cylinder engen, ...</small>
            </p>
            <p>
                <a class="btn btn-default" href="/search/1356/detail/" role="button">View details &raquo;</a>
                <button type="button" class="btn bookmark" id="1356">
                    <span class="
                      glyphicon glyphicon-star-empty "></span>
                </button>
            </p>

        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
            <h3 style="word-break: break-word;">2004 Honda Civic LX Sedan (worcester www.massmotorcars.com) $5900</h3>
            <p>
                <small>2004 honda civic lx sedan has 134,000 miles, great looking car, interior and exterior looks
                    nice,has
                    cd player, power windows ...</small>
            </p>
            <p>
                <a class="btn btn-default" href="/search/1357/detail/" role="button">View details &raquo;</a>
                <button type="button" class="btn bookmark" id="1357">
                    <span class="
                      glyphicon glyphicon-star-empty "></span>
                </button>
            </p>
        </div>
    </div>
</body>

</html>

【讨论】：

【解决方案4】：

1) 可能溢出：隐藏；会成功吗？

2) 您需要使用文本和按钮设置每个 div 的大小，以便每个 div 具有相同的高度。然后为您的按钮：

button {
  position: absolute;
  bottom: 0;
}

【讨论】：

尝试检查您的元素，看看是否有任何东西导致文本流出您的 div。 HTML 应该是响应式的，并且文本应该自动换行。如果你找不到任何东西，试试这个：w3schools.com/cssref/css3_pr_word-wrap.asp
去掉溢出不是让布局问题更严重吗？