Truncate text in an absolute positioned div - html

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

Answer 2

Apply the below css properties this will truncate your overflow text and append the three dots.
.giro-nome {
position: absolute;
top: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}