Ellipsis on selected item of dropdown

[smartm0use]

Hello,
I have a dropdown with items having long text and they go ahead instead of having ellipsis. And this is fine for me.
But I would like to have ellipsis on the selected item only.

This is my dropdown:

If I select an item I get this:

Instead, I would like to have this:

Any way to do it in a "Fomantic way" or do I need to apply to any CSS rule?

[lubber-de]

Override via

/* double .ui.ui is needded to increase specificity and successfully override the settings */
.ui.ui.dropdown .menu > .item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

See https://jsfiddle.net/lubber/Lbgod0zs/10/

[lubber-de]

ok, i recognized you want it only for the selected entry. There is no fomantic way, as it would also need a fixed width. You then have to adjust this yourself via css

[jamessampford]

Could probably use the callback and remove characters and update the text by looking at the width as characters are added?

Could possibly do this within the module under a flag, trimmedSelectedTextpossibly, though may need to also take into account onload/resizing, could be a good addition

[smartm0use]

Would you to set ellipsis using JS instead of CSS?

[smartm0use]

Can you help me with CSS code?

https://jsfiddle.net/cofhkugn/1/

[lubber-de]

@smartm0use
Here you are
https://jsfiddle.net/lubber/13qa2peb/9/

@media only screen and (min-width: 767.98px) {
  .ui.dropdown > .text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 33vw; /* This is according to your jsfiddle which uses a 3-col layout */
  }
}

[smartm0use]

It could not be a definitive solution, since I have to set a CSS rule for every case in which I use dropdown, not only 3-col layout.
In addition I have no ellipsis in all screen resolutions :(