Html Bootstrap 4 - 卡片中的自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42232954/
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 4 - word wrapping in cards
提问by cactodevcie
How can I word wrap text insided cards.
如何在卡片内自动换行文字。
Here's the problem: plunker link
这是问题所在：plunker 链接
Do you have any idea how to fix it?
你知道如何解决它吗？
回答by andreas
You need two rules:
你需要两条规则：
max-widthfor your.cardelements (because without defining a width CSS will not know where to break your long word) oroverflow: hidden;to make the.cardwidth no longer depend on the long word lengthword-wrap: break-word;to tell the browser to break a word
max-width为您的.card元素（因为没有定义宽度 CSS 将不知道在哪里打破你的长字）或overflow: hidden;使.card宽度不再依赖于长字的长度word-wrap: break-word;告诉浏览器打断一个词
.card {
max-width: 100%;
}
.card-text {
word-wrap: break-word;
}
.card {
overflow: hidden;
}
.card-block {
word-wrap: break-word;
}<link data-require="[email protected]" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<div class="card-deck">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">supportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingsupportingto additional content. This card has even longer content than the
first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>回答by Marian07
Simple:
简单的：
/* For screens above: 576px */
.card{
overflow: hidden;
}
.card-text{
word-wrap: break-word;
}
回答by Ben Collins
Also consider this (for URLs etc); from the docs:
还要考虑这一点（对于 URL 等）；从文档：
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
对于较长的内容，您可以添加一个 .text-truncate 类以使用省略号截断文本。需要 display: inline-block 或 display: block。
