在绝对位置的div中截断文本

Cechinel 发表于 Dev

Cechinel

这是我要尝试的JSFiddle：JSFiddle示例

它反应灵敏，而且宽度很大，正是我想要的，就像这样：

在此处输入图片说明

但是，如果尺寸较小，它会与另一个文本重叠和/或折行，如下所示：

在此处输入图片说明

还有这个：

在此处输入图片说明

这是我对文本的css：

.giro-nome {
    position: absolute;
    top: 25%;
}

.giro-percentual {
    position: absolute;
    right: 0;
    top: 25%;
    font-weight: 700;
}

我只想将文本停在一行中，就像这样（预期的，不是真实的）：

在此处输入图片说明

是否有可能？可能不是像我在做的那样绝对，但我不知道另一种方法。

谢谢高级。

哈希笔

text-overflow: ellipsis; 是您要寻找的。

8.2。溢出省略号：“文本溢出”属性

此属性指定当内联内容在其内联进度方向上具有“溢出”而不是“可见”的内嵌内容溢出其块容器元素（“块”）时的呈现。例如，当文本被禁止换行时，文本可能会溢出（例如，由于“ white-space：nowrap”或单个单词太长而无法容纳）。值具有以下含义：

省略号渲染省略号字符（U + 2026）以表示剪切的内联内容。实现可以替换一个更适合语言/脚本的省略号，或者如果省略号不可用，则用三个点“ ...”代替。

但是，首先应指定绝对定位元素的宽度。通过left/right属性，或通过其他方法（例如width: 90%或）width: calc(100% - 80px)：

这里的例子

.giro-nome {
    position: absolute;
    top: 25%;
    left: 0; right: 80px;  /* Equal to > width: calc(100% - 80px) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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