截断绝对定位div中的文本

Question

这是我试图做的JSFiddle:JSFiddle示例

它是响应式的,并且在很大的宽度,它正是我想要的,像这样:

但是在小尺寸中,它与另一个文本重叠和/或打破线条,如下所示:

还有这个:

这是我对文本的简要介绍:

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

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

我只想将文本停在一行中,就像这样(预期,不是真实的):

可能吗？可能不是绝对的,就像我在做,但我不知道另一种方式去做.

谢谢高级.

Answer 1

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;
}