CSS文本省略号和100%宽度

Question

我有以下文本容器:

<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.我需要让它溢出省略号.

Answer 1

试试这个:

.titleContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这是和更新的jsFiddle

Answer 2

没有 Flex 但也可以工作……试试吧。

.element {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.truncate {
  display: table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

100% 宽度的文本溢出省略号

Answer 3

宽度需要以像素为单位添加,百分比不会与其他三个属性一起使用,如下所示: -

.text-ellipsis{
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}