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

Question

我在这里的帖子标题可能会产生误导.首先来看看我目前的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>

Answer 1

将以下样式添加到h3元素:

word-wrap: break-word;

这将导致其中的长URL换行.自动换行的默认设置是normal,它仅包含一组有限的分割标记(例如空格,连字符),这些标记在URL中不存在.

Answer 2

现在更新word-wrap被替换为:

overflow-wrap:break-word;

兼容的旧导航仪和CSS 3它是很好的选择!

这是自动换行的演变(自2012年起......)

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

请参阅兼容性:http: //caniuse.com/#search=overflow-wrap

Answer 3

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

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

button {
  position: absolute;
  bottom: 0;
}