Html CSS 文本省略号和 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27314149/
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
CSS text ellipsis and 100 percent width
提问by Max Frai
I have the following container of text:
我有以下文本容器：
<div class="cardTitles">
<div class="title">
<div class="titleContent">
<i class="fa fa-star-o"></i>
<b>Some long long long title here</b>
<a href="some href"></a>
</div>
</div>
... title divs ...
</div>
css:
css:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
I want to make text full width + text-overflow: ellipsis. So when I resize browser all titledivs should be full 100% width of the parent cardTitleswith cut text to three dots at the end.
我想让文本全宽 + 文本溢出：省略号。因此，当我调整浏览器大小时，所有titlediv 都应该是父级的 100% 宽度，最后cardTitles将文本剪切为三个点。
I found that this is possible using flex. Here is the possible answer:
我发现使用 flex 可以做到这一点。这是可能的答案：
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.
但这对我不起作用。父容器在达到某个子标题的最大长度时停止调整大小。
You can find an example here: http://88.198.106.150/tips/cpp/
你可以在这里找到一个例子： http://88.198.106.150/tips/cpp/
Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.
尝试调整浏览器大小并查看带有文本的标题：What does it mean that a reference must refer to an object, not a dereferenced NULL pointer。我需要让它溢出省略号。
回答by Aakash
Try this out:
试试这个：
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's and updated jsFiddle
这是并更新了 jsFiddle
回答by Nitesh
The width needs to be added in pixels, percentage wont work along with other three properties as given below:-
宽度需要以像素为单位添加，百分比不会与其他三个属性一起使用，如下所示：-
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Amitka
No Flex but could work also ... try it.
没有 Flex 但也可以工作……试试吧。
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
回答by Giuseppe Pesce
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
以下两个 div 包含无法放入框的长文本。如您所见，文本被剪裁了。
This div uses "text-overflow:clip":
这个 div 使用“text-overflow:clip”：
这是一些不适合框的长文本This div uses "text-overflow:ellipsis":
这个 div 使用“text-overflow:ellipsis”：
这是一些不适合框的长文本