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+

如果文本不适合80px，则其容器应为160px。那么简单。请帮帮我。

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
}

CSS半动态宽度

1 个答案: