Html bootstrap 3 在 div 内包装文本内容以进行水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23641913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 wrap text content within div for horizontal alignment
提问by eagertoLearn
My post title here could be misleading. first have a look at HTML i have currently:
我在这里的帖子标题可能会产生误导。首先看看我目前拥有的 HTML：
As you can see, each column's text content overflows to next column. Secondly, each of them is not horizontal aligned. (eg the link for view detailsdoes not align straight). I want them to be aligned straight irrespective of length of text.
如您所见，每一列的文本内容都溢出到下一列。其次，它们中的每一个都不是水平对齐的。（例如链接view details不对齐）。无论文本长度如何，我都希望它们对齐。
Here is my HTML code: (the content here is dynamically generated. so the no of items will vary). I use bootstrap 3 in my code.
这是我的 HTML 代码：（这里的内容是动态生成的。因此项目的数量会有所不同）。我在我的代码中使用引导程序 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) 00</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're ...</small>
</p>
<p>
<a class="btn btn-default" href="/search/1355/detail/" role="button">View details »</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) 50</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 »</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) 00</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 »</a>
<button type="button" class="btn bookmark" id="1357" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</p>
</div>
</div>
回答by kpentchev
Add the following style to your h3elements:
将以下样式添加到您的h3元素中：
word-wrap: break-word;
This will cause the long URLs in them to wrap. The default setting for word-wrap is normal, which will wrap only at a limited set of split tokens (e.g. whitespaces, hyphens), which are not present in a URL.
这将导致其中的长 URL 被换行。word-wrap 的默认设置是normal，它只会在有限的一组拆分标记（例如空格、连字符）处换行，这些标记不存在于 URL 中。
回答by Css lover
Now Update word-wrap is replace by :
现在更新自动换行被替换为：
overflow-wrap:break-word;
Compatible old navigator and css 3 it's good alternative !
兼容旧导航器和 css 3 是不错的选择！
it's evolution of word-wrap ( since 2012... )
它是自动换行的演变（自 2012 年以来......）
See more information : https://www.w3.org/TR/css-text-3/#overflow-wrap
查看更多信息：https: //www.w3.org/TR/css-text-3/#overflow-wrap
See compatibility full : http://caniuse.com/#search=overflow-wrap
查看完整的兼容性：http: //caniuse.com/#search=overflow-wrap
回答by Tushar Walzade
Your code is working fine using bootatrap v3.3.7, but you can use
word-break: break-wordif it's not working at your end.
您的代码在使用 bootatrap v3.3.7 时运行良好，但
word-break: break-word如果它最终不起作用，您可以使用。
which would then look like this -
然后看起来像这样 -
<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)
00</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're ...</small>
</p>
<p>
<a class="btn btn-default" href="/search/1355/detail/" role="button">View details »</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) 50</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 »</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) 00</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 »</a>
<button type="button" class="btn bookmark" id="1357">
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</p>
</div>
</div>
</body>
</html>回答by stianlp
1) Maybe oveflow: hidden; will do the trick?
1）也许溢出：隐藏；会做的伎俩吗？
2) You need to set the size of each div with the text and button so that each of these divs have the same height. Then for your button:
2) 您需要使用文本和按钮设置每个 div 的大小，以便这些 div 中的每一个都具有相同的高度。然后为您的按钮：
button {
position: absolute;
bottom: 0;
}
