html - 截断绝对定位的 div 中的文本

Question

这是我正在尝试做的 JSFiddle:JSFiddle Example

它是响应式的，而且宽度很大，这正是我想要的，像这样:

但是在小尺寸的情况下，它会与另一个文本重叠和/或打断这些行，如下所示:

还有这个:

这是我对文本的 CSS:

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

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

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

这可能吗？可能不像我正在做的那样使用 absolute，但我不知道另一种方法。

谢谢先进。

Answer 1

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

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

This property specifies rendering when inline content overflows its block container element ("the block") in its inline progression direction that has ‘overflow’ other than ‘visible’. Text can overflow for example when it is prevented from wrapping (e.g. due to ‘white-space:nowrap’ or a single word is too long to fit). Values have the following meanings:

ellipsis Render an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more language/script-appropriate ellipsis character, or three dots "..." if the ellipsis character is unavailable.

但是你应该首先指定绝对定位元素的宽度。通过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;
}