Last Comment Bug 741743 - Allow to truncate string in the middle via text-overflow
: Allow to truncate string in the middle via text-overflow
Status: RESOLVED DUPLICATE of bug 740910
:
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: Trunk
: All All
: -- enhancement (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-04-03 05:00 PDT by Sebastian Zartner
Modified: 2012-04-03 10:24 PDT (History)
1 user (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Sebastian Zartner 2012-04-03 05:00:17 PDT
According to https://developer.mozilla.org/En/CSS/Text-overflow and http://dev.w3.org/csswg/css3-ui/#text-overflow there's currently only the possibility to clip strings at the beginning and their end.
Though for recognizability it's sometimes better to crop the string in the middle.
Firebug is using that principle for file names and URLs and it works well. Though the strings are not cropped dynamically. So there's a problem when the containing element is resized. See http://code.google.com/p/fbug/issues/detail?id=4864.

Example:
this_is_a_very_long_filename.txt
this_is_a_very_long_filename2.jpg

With the current implementation this would be cropped to something like:
this_is_a_very_lo…
this_is_a_very_lo…

So the file types and names can't be destinguished.

If the truncation could be specified to happen in the middle of the word, this would look like:
this_is_a_…ename.txt
this_is_a_…name2.jpg

Thereby the most characterizing part is obviously the file extension.
So to keep this visible there could be another option to specify the number of characters to prevent from being cropped (at the left and the right side).

So if there's just space for e.g. 5 characters and we specified not to crop the right 3 characters, the result would look like this:
t…txt
t…jpg

I imagine the CSS syntax to be specified like this:
p {
  white-space: nowrap;  
  width: 100%;                     
  overflow: hidden;
  text-overflow: clip ellipsis clip 3;
}

p {
  white-space: nowrap;  
  width: 100%;                     
  overflow: hidden;
  text-overflow-left: clip;
  text-overflow-middle: ellipsis
  text-overflow-right: clip
  text-overflow-left-preserve: 0;
  text-overflow-right-preserve: 3;
}

Sebastian
Comment 1 Boris Zbarsky [:bz] 2012-04-03 10:24:36 PDT

*** This bug has been marked as a duplicate of bug 740910 ***

Note You need to log in before you can comment on or make changes to this bug.