CSS 文本省略号和 100% 宽度答案

【问题标题】：CSS text ellipsis and 100 percent widthCSS 文本省略号和 100% 宽度
【发布时间】：2015-02-03 12:29:28
【问题描述】：

我有以下文本容器：

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

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

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

这是和updated jsFiddle

【讨论】：

有文字标题：“引用必须引用对象，而不是取消引用的 NULL 指针是什么意思”。尝试调整浏览器大小，你会看到结果
你必须在锚标签上应用省略号属性跨度>
这对我没有帮助:(当我只是在titleContent 中留下文字时，它无论如何都不起作用。
有点旧但仍然：例如，您可以让它在这里工作吗？ jsfiddle.net/k9ew7ry2/17 带有红色背景的文本...它不适用于其中一位父母的列/列计数设置..
将.item的显示改为block。似乎工作。 jsfiddle.net/k9ew7ry2/29

【解决方案2】：

没有 Flex 但也可以工作...试试看。

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

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

text-overflow ellipsis with 100% width

【讨论】：

【解决方案3】：

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

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

【讨论】：

很遗憾。有点扼杀响应式设计。 :(
@user959690 您可以使用max-width: calc(100%); 进行响应式设计。
@Ron 没有做任何有用的事情

【解决方案4】：

#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 使用“text-overflow:clip”：

这是一些不适合该框的长文本

这个 div 使用“text-overflow:ellipsis”：

这是一些不适合该框的长文本

【讨论】：