Ellipese along with an icon on right (always)

[chandanshukla2007]

Hi,
I have

long text Text text text text text text text text text text text text text text text text text text text

When the window size is small the ellipses should appear along with icon on its right

when windows is maximized text should display in full or as much as it can be accomodated along with icon on right

Icon should always appear and end of the text not at the right most corner

Can somebody please help me out with this as i am new to css and tried so many way but it didnt work

[Atelierbram]

Can you show one of your better attempts in a demo?

[chandanshukla2007]

/* this code doesnt work when i maximize the window , this pushes the image icon to right most corner where it should have been come next to end of text*/

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

[Paulie_D]

https://stackoverflow.com/questions/44649308/why-doesnt-icon-show-after-ellipses-inside-a-table-row

We still need a demo. Just posting the question again does nothing to help.

We can’t diagnose code we can’t see.

[chandanshukla2007]

https://codepen.io/chandanshukla2007/pen/RgVyby

[Atelierbram]

Can you try to move the inline styles in the HTML over to the CSS tab? Do you know how to target HTML-elements in CSS?

[Paulie_D]

..also there is no image seen. You might want to use an online replacement.

[Paulie_D]

Also – https://css-tricks.com/flexbox-truncated-text/

[chandanshukla2007]

Flexbox truncated text doesnt keep the icon after the text when maximized it takes empty space in between text and icon.

[chandanshukla2007]

ye but you can see red color box please consider that as an icon :)

[Paulie_D]

Perhaps you need to clarify what it is you actually want.
As it is, it’d kind of unclear.

https://codepen.io/Paulie-D/pen/rwmRVR

[Author]

Posts