对于最大宽度单元格，在表格单元格内的跨度上的省略号

Question

小更新

注意： Target主要是Chrome（可能是Firefox） - 因为它是一个扩展程序。但是，当然，如果有一个全面的解决方案，也很高兴知道。

另一次更新

注意：注意到如果A的文本中没有空格并且它太大，则会推出B。问题变得更糟，看起来我从一个解决方案进一步思考。更新了示例代码以允许来自用户的输入。尝试没有空格的样本。

---

我有一个固定定位的全宽和固定高度的盒子。它被放置在可变/动态宽度的环境中。

+-----------------------------+
|                             |
|                             |
[=============================] << The box.
|                             |
|                             |
...
      <-  dynamic width  ->

该框有两个主要子项 A和B. B优先于宽度，并且在给定高度上保存所有内容，但不是贪婪的方式。 A以贪婪的方式吃剩余的空间。在A中的文本溢出时，应该添加省略号 - 这就是我被卡住的地方。

一些例子。

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______ |
+----------------+-----------+

从浮动到绝对，相对和其他类型的各种方法摆弄后，我终于登陆了表格布局（如CSS表格，而不是HTML）。用其他方法无法获得理想的效果。如果有人知道如何告诉：）

问题是A中溢出的省略号部分。

我可以以某种方式调整，例如如何设置A才能获得此功能？

示例代码：

忽略JavaScript，显示过流和欠流只是一个方便的例程。 （在Firefox的样式编辑器中编辑时发现很好）< / p>

/* 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

使用Javascript好吗？

如果有固定的宽度，

text-overflow仅适用于表格单元格。以下代码段将max-width的{​​{1}}设置为正确的宽度。

将其放在span函数和flip事件侦听器中（如果包含div没有固定宽度）。

resize

Youu还必须将 txt.style["max-width"] = "calc(" + wrap.clientWidth + "px - " + right.clientWidth +"px)"; 添加到您的white-space: nowrap样式。

#txt

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;
}