CODEWITHSUNDEEP
htmlcss
Cechinel
Cechinel

Reputation: 707

Truncate text in an absolute positioned div

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:

enter image description here

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

enter image description here

and this:

enter image description here

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):

enter image description here

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

Thank you advanced.

Upvotes: 7

Views: 11826

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99484

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

Upvotes: 16

Abdulla khan
Abdulla khan

Reputation: 768

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

Upvotes: 1

Related Questions