当div对齐时,如何保持div不被包裹,宽度会有所不同？

Question

我有一个简单的设置.一个div包含标题和titleOptions.

标题有时很长,我希望它有一个ellipsis而不是显示完整的标题.标题右侧是titleOptions.这些可以变化.有时候删除,编辑和移动,有时候会有一些,有时候没有.(因此标题宽度无法修复,因为titleOptions不同).

我如何总是为title和titleOptions设置一行.我不希望它永远包装,或推动下面的titleOptions.

我更喜欢titleOptions宽度是流动的,因为这样可以让更长的标题拥有更多的空间.

这是一个更好解释的小提琴:http: //jsfiddle.net/K8s3Z/1

Answer 1

您可以使用flexbox.

.titleBar {
    width:980px;
    overflow:hidden;
    border: 1px solid #EEE;
    margin-bottom:2em;
    display: -webkit-flex;
}
.title {
    border: 1px solid #DDD;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-flex: 1;
}

.titleOptions {
    white-space:nowrap;
    border: 1px solid #DDD;
}

小提琴(还需要其他语法和前缀等).

使用JS,如果flexbox不可用

function getByClassName(collection, className) {
    var i = collection.length;
    var regexp = new RegExp('\\b' + className + '\\b');
    var returnSet = [];
    while ( i-- ) {
        if ( collection[i].className.match(regexp)  ) {
            returnSet.push(collection[i]);
        }
    }
    return returnSet;
}
if ( ! Modernizr.flexbox && ! Modernizr.flexboxlegacy ) {
    var bars = document.querySelectorAll('.titleBar');
    for (var i = 0, l = bars.length; i < l; ++i) {
        var bar = bars[i];
        var divs = bar.getElementsByTagName('*');
        var optWidth = getByClassName(divs, 'titleOptions')[0].offsetWidth;
        getByClassName(divs, 'title')[0].style.width = bar.offsetWidth - optWidth + 'px';
    }
}

如果您不想使用Modernizr(由于某种原因),小提琴具有用于检查flexbox的自定义函数(基于Modernizr).只需将这些响应分配给Modernizr小提琴中的本地对象即可.此外,没有jQuery,以防你也厌恶它.如果您正在使用它们,这两个都很容易替换.

Answer 2

要显示省略号,可以使用css文本溢出.虽然是AFAIK,但你需要给容器一个宽度,以便它知道溢出的位置.

此CSS属性不会强制发生溢出; 要执行此操作并使文本溢出应用,作者必须在元素上应用一些其他属性,例如将overflow设置为hidden.

在加载DOM之后,您可以运行一些javascript代码,以根据.titleOptions的宽度动态设置.title的宽度.

以下是您尝试执行的操作的静态示例:

.title {
    float:left;
    border: 1px solid #DDD;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 76%;
}

尝试使用js动态设置宽度.

编辑:这是一个如何使用javascript(和一个小jQuery)动态设置宽度的示例.使用.title我上面的css (减去width: 76%;),我添加了这个js:

function getChildByClassName(ele, className) {
    for(var i = 0; i < ele.childNodes.length; i++) {
        if($(ele.childNodes[i]).hasClass(className)) {
            return ele.childNodes[i];
        }
    }
}

var titleBars = document.getElementsByClassName('titleBar');
var w = 0;
var spacer = 10;

for(var i = 0; i < titleBars.length; i++) {
    w = titleBars[i].clientWidth;
    w = w - getChildByClassName(titleBars[i], 'titleOptions').clientWidth - spacer;
    $(titleBars[i]).children('.title').eq(0).css('width', w + 'px');
}

http://jsfiddle.net/K8s3Z/8/