我有以下文本容器:
<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:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
我想使文本全宽+文本溢出:省略号。因此,当我调整浏览器大小时,所有title
div应该是父级cardTitles
的100%宽度,最后剪切文本为三个点。
我发现这可以使用flex。这是可能的answer:
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
但这对我不起作用。父容器在达到某个子标题的最大长度时停止调整大小。
你可以在这里找到一个例子:http://88.198.106.150/tips/cpp/
尝试调整浏览器大小并使用文本查看标题:What does it mean that a reference must refer to an object, not a dereferenced NULL pointer
。我需要让它溢出省略号。
试试这个:
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
宽度需要以像素为单位添加,百分比不会与其他三个属性一起使用,如下所示: -
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#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;
}
以下两个div包含一个不适合框的长文本。如您所见,文本被剪裁。
这个div使用“text-overflow:clip”:
This is some long text that will not fit in the box这个div使用“text-overflow:ellipsis”:
This is some long text that will not fit in the box没有Flex,但也可以工作......试试吧。
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}