Truncate text in an absolute positioned div

Question

Here is the JSFiddle I'm trying to do: JSFiddle Example

It is responsive, and in a large width, it is exactly what I want, like this:

But in small sizes, It overlaps the another text and/or breaks the lines, like this:

and this:

And this is my css to the texts:

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

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

I wanted just to stop the text in a single line, something like this(expected, not real):

Is it possible? Probably not with absolute, like I'm doing, but I have no idea another way to do it.

Thank you advanced.

Answer 1

text-overflow: ellipsis; is what you're looking for.

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.

However you should specify the width of the absolutely positioned element at first. Either by left/right properties, or by other approaches such as width: 90% or 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;
}