我有以下文本容器:
<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的宽度应为父级的100%,cardTitles
并在末尾将文本剪切为三个点。
我发现使用flex可以做到这一点。这是可能的答案:
.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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句