ocon - 12:49 am on Sep 13, 2012 (gmt 0)
I have three pieces of data I would like to display on the same line:
Data A, Data B, Data C
Except for 10px padding on the left and right, Data A should be left-justified, Data B should be centered, and Data C should be right-justified. But not all pieces of data are the same length.
My current method is sloppy, code heavy, and does a poor job, especially if Data B is very small, and Data A and/or C is long.
<div id="a">Data A</div>
<div id="b">Data B</div>
<div id="c">Data C</div>
How can I improve it?
Also, if the data gets really long, is there a way to "hide" the text if there isn't enough room to show it? Maybe force a line-break that is no longer visible because of overflow:hidden? Using the code from above, the text inside the span isn't as important as the text outside of it.
<div id="a"><span>Data </span>A</div>
<div id="b"><span>Data </span>B</div>
<div id="c"><span>Data </span>C</div>