Ellipsis on span inside table cell for max width cell - html

Question

Small update
Note: Target is mainly Chrome (perhaps Firefox) – as it is for an extension. But, of course, if there is an all-round solution that would be nice to know as well.
Another update
Note: Noticed that if there are no spaces in the text for A and it is too big, it pushes out B. Problem became worse and looks like I'm further from a solution then first thought. Updated sample code to allow input from user. Try sample without spaces.
I am having a fixed positioned box of full width and fixed height. It is placed inside an environment of variable / dynamic width.
+-----------------------------+
| |
| |
[=============================] << The box.
| |
| |
...
<- dynamic width ->
The box has two main children A and B. B takes precedence on width and are to hold all of it contents on given height, but not in a greedy way. A is eats remainder of space in a greedy fashion. On text-overflow in A, ellipsis should be added – and that is where I'm stuck.
Some examples.
1. B fills it's space, A expand to fill width.
+-------------------+--------+
| A________ | __B___ |
+-------------------+--------+
2. A has overflow, ellipsis added.
+-------------------+--------+
| A_____________... | __B___ |
+-------------------+--------+
3. B, has grown, A shrinks.
+----------------+-----------+
| A__________... | __B______ |
+----------------+-----------+
After fiddling around with various approaches from floats to absolute, relative and other types I finally landed on a table layout (as in CSS-table, not HTML). Can't get desired effect with other approach. If anyone know how it is OK to tell :)
Problem is the ellipsis part on overflow in A.
Can I somehow tweak e.g. how A is set up to get this?
Sample code:
Ignore the JavaScript, it is only a convenience routine to display the over and under-flow. (Found it nice to have whilst editing in Firefox's Style Editor)
/* Yes. It is all a mess and weird usage of variables vs this etc. */
function Hack() {
var x = 0,
n = 150,
wrap = document.querySelector('#wrap'),
left = document.querySelector('#left'),
right = document.querySelector('#right'),
txt = document.querySelector('#txt'),
ent = document.querySelectorAll('.entry'),
log = document.querySelector('#log'),
run = document.querySelector('#run'),
rt = document.querySelector('#rt'),
samp = document.querySelector('#sample'),
t = samp.value
;
this.rt = parseInt(rt.value) || 1000;
function getComp(e) {
var x = window.getComputedStyle(e, null);
return ''+
~~(parseInt(x.getPropertyValue('height'))) + 'x' +
~~(parseInt(x.getPropertyValue('width')))
;
}
this.status = function () {
log.textContent = 'Height / Width for:\n' +
' wrap : ' + getComp(wrap) + '\n' +
' left : ' + getComp(left) + '\n' +
' right : ' + getComp(right) + '\n' +
' sample: ' + getComp(txt) + '\n'
;
}
/* Change between long and short text in sample cells. */
this.flip = function () {
txt.textContent = x ? t : (new Array(n)).join(t);
Array.prototype.forEach.call(ent, function (e) {
e.textContent = x ? 'abc' : 'abcabc';
});
x ^= 1;
this.status();
}
/* Toggle auto run. */
this.update = function () {
t = samp.value;
this.rt = parseInt(rt.value);
if (!this.rt || this.rt < 10)
rt.value = this.rt = 100;
clearInterval(this.ttt);
if (run.checked)
this.ttt = setInterval(this.flip.bind(this), this.rt);
}
document.addEventListener('click', this.flip.bind(this));
run.addEventListener('click', this.update.bind(this));
rt.addEventListener('change', this.update.bind(this));
samp.addEventListener('keyup', this.update.bind(this));
this.update();
}
window.addEventListener('load', function () {
var hack = new Hack();
hack.flip();
});
* { margin : 0; padding : 0; }
#log { margin : 5pt; border : 1px solid #ccc; }
#filler { margin-top : 90px; height : 2000px; background : #efefef; }
label,
input { cursor : pointer; }
/* inner elements of cells in right -- (B) */
.hdr,
.entry { padding : 2px 5px; }
.hdr { font-weight: bold; }
#wrap { /* the red thing -- aka (the box) */
position : fixed;
top : 135px;
height : 23px;
background : #600;
color : #999;
height : 20px;
width : 100%;
display : table-row;
}
#left { /* the green thing -- aka (A) */
background : #044;
display : table-cell;
width : 100%;
}
#txt { /* sample text in left */ /* Where I want ellipsis */
display : block;
height : 20px;
width : 100%;
overflow : hidden;
text-overflow: ellipsis;
}
#right { /* the purple / blue thing -- aka (B) */
background : rgba(0,0,200,.5);
height : 20px;
display : table-cell;
width : 100%;
white-space: nowrap;
}
<p>Click document to expand text, or auto-run:</p>
<div>
<input type="checkbox" id="run" checked /><label for="run">Change every </label>
<input type="number" id="rt" value="1000" step="100" /> millisecond.
Sample text: <input type="text" value=" sample" id="sample" />
</div>
<pre id="log"></pre>
<!-- The box -->
<div id="wrap">
<div id="left">
<span id="txt">sample <!-- ellipsis here --> </span>
</div>
<div id="right">
<span class="hdr">Foo</span><span class="entry">abcd</span>
<span class="hdr">Bar</span><span class="entry">abcd</span>
</div>
</div>
<!-- EOF: The box -->
<div id="filler">dummy filler page height</div>

Answer 1

Is using Javascript ok?
text-overflow only works in table cells if there is a fixed width. The following snippet sets the max-width of the span to the correct width.
Place this in your flip function and in a resize event listener (if the containing div does not have a fixed width).
txt.style["max-width"] = "calc(" + wrap.clientWidth + "px - " + right.clientWidth +"px)";
Youu will also have to add white-space: nowrap to your #txt style.
function Hack() {
var x = 0,
n = 150,
t = 'sample ',
wrap = document.querySelector('#wrap'),
left = document.querySelector('#left'),
right = document.querySelector('#right'),
txt = document.querySelector('#txt'),
ent = document.querySelectorAll('.entry'),
log = document.querySelector('#log'),
run = document.querySelector('#run'),
rt = document.querySelector('#rt')
;
this.rt = parseInt(rt.value) || 1000;
function getComp(e) {
var x = window.getComputedStyle(e, null);
return ''+
~~(parseInt(x.getPropertyValue('height'))) + 'x' +
~~(parseInt(x.getPropertyValue('width')))
;
}
this.status = function () {
log.textContent = 'Height / Width for:\n' +
' wrap : ' + getComp(wrap) + '\n' +
' left : ' + getComp(left) + '\n' +
' right : ' + getComp(right) + '\n' +
' sample: ' + getComp(txt) + '\n'
;
}
/* Change between long and short text in sample cells. */
this.flip = function () {
txt.textContent = x ? t : (new Array(n)).join(t);
Array.prototype.forEach.call(ent, function (e) {
e.textContent = x ? 'abc' : 'abcabc';
});
txt.style["max-width"] = "calc(" + wrap.clientWidth + "px - " + right.clientWidth +"px)";
x ^= 1;
this.status();
}
/* Toggle auto run. */
this.toggle = function (r) {
this.rt = parseInt(rt.value);
if (!this.rt || this.rt < 10)
rt.value = this.rt = 100;
clearInterval(this.ttt);
if (run.checked)
this.ttt = setInterval(this.flip.bind(this), this.rt);
}
document.addEventListener('click', this.flip.bind(this));
run.addEventListener('click', this.toggle.bind(this));
rt.addEventListener('change', this.toggle.bind(this, 1));
this.toggle();
}
window.addEventListener('load', function () {
var hack = new Hack();
hack.flip();
});
* { margin : 0; padding : 0; }
#log { margin : 5pt; border : 1px solid #ccc; }
#filler { margin-top : 90px; height : 2000px; background : #efefef; }
label,
input { cursor : pointer; }
/* inner elements of cells in right -- (B) */
.hdr,
.entry { padding : 2px 5px; }
.hdr { font-weight: bold; }
#wrap { /* the red thing -- aka (the box) */
position : fixed;
top : 135px;
height : 23px;
background : #600;
color : #999;
height : 20px;
width : 100%;
display : table-row;
}
#left { /* the green thing -- aka (A) */
background : #044;
display : table-cell;
width : 100%;
}
#txt { /* sample text in left */ /* Where I want ellipsis */
display : block;
height : 20px;
width : 100%;
overflow : hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#right { /* the purple / blue thing -- aka (B) */
background : rgba(0,0,200,.5);
height : 20px;
display : table-cell;
width : 100%;
white-space: nowrap;
}
<p>Click document to expand text, or auto-run:</p>
<div>
<input type="checkbox" id="run" checked /><label for="run">Change every </label>
<input type="number" id="rt" value="1000" step="100" /> millisecond.
</div>
<pre id="log"></pre>
<!-- The box -->
<div id="wrap">
<div id="left">
<span id="txt">sample <!-- ellipsis here --> </span>
</div>
<div id="right">
<span class="hdr">Foo</span><span class="entry">abcd</span>
<span class="hdr">Bar</span><span class="entry">abcd</span>
</div>
</div>
<!-- EOF: The box -->
<div id="filler">dummy filler page height</div>