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条评论
登录后参与评论

相关文章

来自分类Dev

如果发生溢出,如何设置UITextView的最大高度和固定宽度并强制省略号而不是滚动?

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

使用div的表格不适用于宽度或文字省略号

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

flex项目内的CSS省略号

来自分类Dev

带有省略号的CSS文字换行

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

处理省略号

来自分类Dev

当宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

Reduce()和...(省略号)

来自分类Dev

截断省略号,不带宽度

来自分类Dev

文字省略号不显示在flexbox项上

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

CSS文字溢出:省略号在V-chip上不起作用

来自分类Dev

具有第二列动态宽度和省略号的固定宽度表

来自分类Dev

宽度100%元素中的文本溢出省略号实现

来自分类Dev

文字溢出:省略号;不截断溢出文本并给出省略号

来自分类Dev

结构省略号

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

如何使用文字溢出:省略号?

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

居中渐变省略号CSS阴影

来自分类Dev

宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

省略号以限制离子的文本高度和宽度

来自分类Dev

如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

Related 相关文章

热门标签

归档