截断绝对定位div中的文本

Question

这是我试图做的JSFiddle：JSFiddle Example

它是响应性的，并且在很大的宽度上，它正是我想要的，像这样：

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

和此：

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

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

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

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

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

谢谢你的进步。

Answer 1

text-overflow: ellipsis;是你正在寻找的。

  

<强> 8.2. Overflow Ellipsis: the ‘text-overflow’ property

     

此属性指定内联内容溢出时的呈现   在其内联进程中阻止容器元素（＆＃34;块＆＃34;）   除'可见'以外的'溢出'的方向。文字可能会溢出   例如，当它被阻止包裹时（例如由于...   'white-space：nowrap'或单个单词太长而不适合）。价值观   以下含义：

     

省略号渲染省略号字符（U + 2026）以表示剪切的内联内容。实现可以替代更多   语言/脚本适当的省略号字符，或三个点＆＃34; ...＆＃34;如果   省略号字符不可用。

但是，您应该首先指定绝对定位元素的宽度。可以通过left / right属性，也可以采用width: 90%或width: calc(100% - 80px)等其他方法：

<强> EXAMPLE HERE

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

Answer 2

应用以下css属性，这将截断溢出文本并附加三个点。

.giro-nome {
   position: absolute;
   top: 25%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}