Ellipsis box in IE 11

Ellipsis box in IE 11

  

Hi 


I need to set an ellipsis to cut  a long sentence in a form. I set in the extended properties with style as 

SyntaxEditor Code Snippet

"text-overflow: ellipsis;"

IN IE 11 IT simply does not appear the ellipsis. In Chrome it appears but the field turns out editable which cannot happen at all. 


I want the possibility the user to hover the ellipsis and appearing the remaining text. 


Hi Jorge,

white-space: nowrap; width: 46px; overflow: hidden; text-overflow: ellipsis; display: block;

use this piece of code i have tested it on ie-11 and working fine.

and use attribute title in the element to show the remaining value on mouse hover by passing the needed value in the value field of the element

Regards,

Pankaj

not here...  it enabled the cursor to be visible... I only want to hover the ellipsis and appear the rest of the text... 


Hi Jorge,


Please refer this link

https://jsfiddle.net/Mi_Creativity/6nystnkd/2/



    120px;
    : #0079c1;
    -size: 20px;
    -weight: 400;
    -overflow: ellipsis;
    : pointer;
    -break: break-all;
    hidden;
    -space: ;
}
hover
    : visible; 
    -space: normal;
    auto; /* just added this line */
    100%;
}

ah the problem is the fact we are using an input box in the form...

that code does not work for an input form. The form turns out to have wrong shape.


Solution

Jorge, you can delete the input and replace it with an expression, if you don't need to edit the value. On the expression (or in a container div) you can use those styles and it should work.

Solution

Input box will show all the text present in table. If you want to just show the text as ellipsis, you need to wrap that in div/expression and apply CSS mentioned above.


perfect. I have made some tweakings and it is working now!


With the input form it will never work as the input box  has a hidden CSS style defined and the behavior is unpredictable, when we try to change the text CSS style in the input box.

there is a slight problem . when I hover the last parameter the pop up shows an annoying small grey bar in the bottom, see below.


and what I would like to  have:


solved: i took off the annoying line -

height:auto; /* just added this line */ 

is there a way to bold the ellipsis without creating new classes?

Hi Jorge,

There is "bold" class is avalabele


Hi Jorge,


here is demo for only "..." ellipsis will bold.

cannot open external oml. and my environment belongs to 10.0 and the enterprise platform uses the 9 version so it is not possible to run the oml files. :(

but thanks! :)


Hi Jorge,


Please try this.

it does not work. It appears the ellipsis fixed and all the text and the ellipsis bold.. I am using the 9 version of OS, yours is the 10 version. 

In chrome this code does not work as well. The former works well (but without having bold ellipsis).