css - CSS 半动态宽度

Question

我有一些关键字显示在单独的内联块元素中，宽度为 10%（=80px）。目前我正在设置overflow:hidden;更长的单词，但这不是一个好习惯。我希望如果其中一些关键字比平时长，它们的父 div（当前应用 10% 宽度的那个）应该是其大小的两倍：160px。我想知道这是否只能用 CSS3 解决。

我将尝试直观地解释它：

+__80px__+__80px__+__80px__+

+__text__+

+__longer text____+

+______way longer text_____+

代替

+overflow hi+或者+random width to fit text+

如果文本不适合 80 像素，则其容器应为 160 像素。就这么简单。请帮我。

Answer 1

我想不出任何方法可以在 CSS 中做到这一点，但是通过一点 JavaScript 魔法，你可以让它工作：

// assuming all elements are in a container with id="container"...
var qsa = document.getElementById('container').children, l = qsa.length, i;
for( i=0; i<l; i++) {
    if( qsa[i].scrollWidth > 240) {
        // this one handles REALLY long text by cutting them off with "..."
        qsa[i].style.textOverflow = "ellipsis";
        qsa[i].style.whiteSpace = "nowrap";
    }
    if( qsa[i].scrollWidth > 160) qsa[i].style.width = "240px";
    else if( qsa[i].scrollWidth > 80) qsa[i].style.width = "160px";
    // else do nothing, leave the deafult 80 width
}