![]() ![]() Really? I do not believe you! REALLY! So the ultimate answer is: 42! text-overflow: ellipsis This is sooo long text. Curious? Now I will count 1 2 3 4 5 6 7 8 9. Probably it will overflow, right? But maybe, maybe there will be extremely important information that you should not miss in the end. ready ( function () Implicit This is sooo long text. Here is the code ( download from github): Left text-overflow test page //on document ready $ ( document ). Possibly react on resize/ready/… events.Shorten it by one letter as long as text is longer than hidden element.Put text (stored in data- attribute) that should be displayed into hidden element.Walks through all elements that may possibly overflow.Adds hidden element whose width is same as maximal text width into page.Yes, JavaScript :-/ My sample is using JQuery and works like this: That is confusing, so this way was not feasible for me. For example it cuts letter O so it looks like bracket. One is common to all of them - they are using clipping by rectangle so text which is on border is clipped too. Other possibility are various CSS hacks, like this one, or this one, or … They are based on nasty tricks and suffer for many problems. It would allow you to define behavior for both sides of text. Unfortunately it is not possible nowadays, there is only outdated draft of such function done by W3C. But what about text that has more important part on the end? It would be better to show ellipsis on left side, right? That is fine for text has more important part on the beginning. ![]() There is CSS text-overflow property that can end text that can visualize by ellipsis (“…”) that text is longer than element size so it overflows element and is hidden. What is worse my cell width depends on client resolution so I cannot trim text on server. ![]() In that case client needs to see end of that text because it contains more important data. Today I needed to put one line of possibly long text into table. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |