CSS文本省略号和100％的宽度

我有文字的以下容器：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; 
}

我要让文字全宽+文本溢出：省略号。所以，当我调整浏览器的全部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。我需要使溢出省略号。

来源

2014-12-05 Ockonal

试试看。

这里是link

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

来源

2014-12-05 11:26:46 Aakash

标题中有文字：'这是什么意思，引用必须引用一个对象，而不是一个取消引用的空指针'。尝试调整浏览器大小，你会看到结果 – Ockonal 2014-12-05 11:57:13

你必须在定位标记上应用省略号属性 – Aakash 2014-12-05 12:24:58

它没有帮助我:(当我只是在titleContent中留下文本时，它无法正常工作 – Ockonal 2014-12-05 14:41:24

#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使用“文本溢出：夹”：

这是将不适合在框中一些长文本

这个div使用“文本溢出：省略号”：

这是一些，将不适合在框中

来源

2014-12-05 11:31:58

宽度需要以像素为单位添加长文本，比例不会随着其他三个工作属性，如下所示： -

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

来源

2015-10-26 10:20:43 Nitesh

不幸的是，这种杀死响应式设计。:( – user959690 2017-02-14 22:34:50

CSS文本省略号和100％的宽度

回答

相关问题