css - 当与它对齐的 div 的宽度可能会有所不同时，如何防止 div 换行？

Question

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

标题有时很长，我希望它有一个ellipsis而不是显示完整的标题。标题右侧是titleOptions。这些可能会有所不同。有时删除、编辑和移动，有时一些，有时没有。（因此无法固定标题宽度，因为 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;
}

小提琴（还需要其他语法和前缀等）。

---

如果 flexbox 不可用，则使用 JS

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 text-overflow。虽然 AFAIK，但您需要给容器一个宽度，以便它知道溢出将发生在哪里。

此 CSS 属性不会强制发生溢出；为此并应用文本溢出，作者必须在元素上应用一些附加属性，例如将溢出设置为隐藏。

您可以在 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/

Answer 3

这是一个使用positioning 的选项（仅 CSS 和所有支持 的浏览器减去 box-shadow），甚至可以很好地混合文本。

小提琴

.titleBar {
    width:980px;
    overflow:hidden;
    border: 1px solid #EEE;
    margin-bottom:2em;
    position: relative;
}

.title {
    float:left;
    border: 1px solid #DDD;

    overflow:hidden;
    white-space:nowrap;
}

.titleOptions {
    border: 1px solid #DDD;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;

    /* optional... make it blend in instead of ellipsis */
    -moz-box-shadow:    2px 0 25px 50px #fff;
    -webkit-box-shadow: 2px 0 25px 50px #fff;
    box-shadow:         2px 0 25px 50px #fff;     
}

混合的屏幕截图......以防你没有抓住它。

Answer 4

如果您将选项容器与文本置于同一级别并使其浮动，则文本应自动环绕容器。通过一些调整，您可以仅显示一行并隐藏其余行。

试试这个html：

<div class="titleBar">
    <div class="title"><div class="titleOptions">OPTIONS | CLICK ME</div> THIS IS MY TITLE </div>
</div>

和CSS：

.titleBar {
    border: 1px solid #EEE;
    margin-bottom:2em;
}

.title {
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}

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

作为 IE 的后备，您可以删除 .title 上的文本溢出属性并改用它

/*IE Fallback*/
.titleOptions {
    background-color:white;
    position:relative;
    z-index:10;
}
.titleOptions:before {
  content: "\2026 ";
  padding-right: 5px;
}

Answer 5

只需将容器 div 的宽度设为自动