javascript - How to insert ellipsis into a large dataset in HTML with the least latency -
insert ellipsis (...) html tag if content wide mentions how insert ellipsis html content. solution works, find when applied large dataset (imagine 1,000 div's) tends pretty slow.
my jsfiddle demonstrates issue. changing variable set (numberofdivs) 10 100 dramatically increases time takes output results. changing number 100 1000, causes chrome want kill page.
it seems jquery's solution, , others have seen, involve either populating element in dom text (i believe jquery plugin used of sort, seems expensive large datasets) or using feature not supported ie7 , other older browsers (text-wrap:ellipsis).
it seems calls element.offsetwidth or element.clientwidth expensive when dealing large sets of data.
has found optimizations or robust server-side solutions? when robust server-side solution, mean 1 takes account text's size , size of containing div (or other element). doing substring of text 1 solution, not consider robust.
nobody have found robust & performant solution this, covers browsers , works equally in of them since doesn't exist. robust & performant solution pure css, supported subset of browsers people wish support.
until browsers wish support, support text-overflow: ellipsis, can have either robust (slow js looks @ parameters) or performant (substring whether server or clientside).
the browser doesn't support css trick firefox. ie7+,and webkit browsers chrome , safari supports fine. opera supports -o-text-overflow
should decide not support firefox, can support other browsers doing this:
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; you need white-space: nowrap; , overflow: hidden; make text-overflow work well.
if can live text not being selectable can use xul hack firefox, find usefull myself.
Comments
Post a Comment