Clever Geek Handbook

Truncate text at absolute div position

Here is a JSFiddle example I'm trying to do: JSFiddle example

It is responsive and in large width this is exactly what I want, for example:

enter image description here

But in small sizes it overlaps other text and / or breaks lines like this:

enter image description here

and this:

enter image description here

And this is my css for the texts:

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

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

I wanted to just stop the text on one line, something like this (expected, not real):

enter image description here

Is it possible? Probably not with absolute as I do, but I have no idea how to do it.

Thank you frontline.

+3


source to share


2 answers


text-overflow: ellipsis

; this is what you are looking for.

8.2. Overflow ellipsis: the "text overflow" property

This property specifies to render when inline content overflows its block container element ("block") in its inline progression that has "non-overflow" visible. Text may overflow for example when it is prevented from wrapping (for example, due to "White-space: nowrap or one word is too long to match). The values ​​are as follows:

ellipsis Display ellipsis (U + 2026) to represent clipped inline content. Implementations can replace more language / script - matching ellipsis symbol or three dots "..." if ellipse symbol is not available.

However, you must first specify the width of the absolutely positioned element. Either using properties left

/ right

or other approaches like 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;
}
+6


source


Apply the following css properties, this will truncate your overflow text and add three dots.



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


source






More articles:


All Articles