CSS文字省略号和100%宽度

马克斯·弗赖

我有以下文本容器:

<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;
}

我想使文本全角+文本溢出:省略号。因此,当我调整浏览器大小时,所有titlediv的宽度应为父级的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;
}

这是最新的jsFiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档