如何使一个div不换行，当与它对齐的div的宽度可能会变化？

Question

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

有时候标题很长，我想用省略号(ellipsis)代替显示完整的标题。 标题右侧是标题选项。它们可能会有所不同。有时是删除、编辑和移动，有时是其中一些，有时则没有。(因此标题宽度不能固定，因为标题选项会变化)。

如何始终让标题和标题选项占一行。我不希望它换行或将标题选项推到下面。

我更喜欢标题选项的宽度是自适应的，因为这样可以给更长的标题提供更多的空间。

这里有一个示例链接，更好地解释了我的意思： http://jsfiddle.net/K8s3Z/1

- KingKongFrog

---

我理解标题会发生变化，但是标题选项的最大宽度是否可以固定？或者你是在寻找完全流动的解决方案？ - user710031

如果有足够的空间，对于titleOptions，我希望完全自适应。我想展示更多的标题内容。 - KingKongFrog

使用JavaScript还是不使用？有没有向后兼容性方面的问题？例如，哪些浏览器版本是允许的？ - yunzen

您想要所有内容都用 titleBar 包装起来吗？之所以问这个问题是因为如果我理解正确，您想要 title 和 titleOptions 的宽度都可以变化，并且由于它们都被包装在 titleBar div 中，空格换行不再是一个问题（因为其宽度已设置为980px）。 - orustammanapov

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

fiddle（这个也需要其他语法和前缀等）。

---

如果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）。只需将这些响应分配给fiddle中的本地对象Modernizr。此外，没有jQuery，以防您对它也有厌恶感。如果您正在使用它们，两者都很容易在这里替换。

- kalley

---

+1 for flexbox。虽然它不向后兼容。我目前正在开发一个flexbox解决方案，该解决方案使用modernizr来使用表格或浮动以解决不兼容问题。 - yunzen

已更新为JavaScript回退... 这应该可以在IE 8上正常工作。 - kalley

Answer 2

为了显示省略号，您可以使用CSS属性text-overflow。尽管据我所知，您需要为容器指定宽度，以便其知道溢出会发生在哪里。

引用块中指出：“此CSS属性不会强制溢出发生；要应用text-overflow并使其生效，作者必须在元素上应用一些其他属性，例如将overflow设置为hidden。”

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

这是一个静态示例，展示了您尝试实现的内容：

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

尝试使用JavaScript动态设置宽度。

编辑：以下是如何使用JavaScript（和一点jQuery）动态设置宽度的示例。使用上述.title的CSS（不包括width: 76%;），我添加了以下JavaScript代码：

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/

- Nick Rolando

---

谢谢@Shredder提供的静态示例！想看看是否有流体示例。 :) - KingKongFrog

@KingKongFrog，我更新了我的答案，并附上了一个示例。希望能有所帮助。 - Nick Rolando

+1. 这是最佳解决方案，而且在所有现代浏览器中应该都能正常工作。 - Ed Bayiates

Answer 3

这里有一个选项，使用positioning（仅使用CSS且所有浏览器都支持，不包括box-shadow），甚至还具有文本的漂亮混合效果。 Fiddle

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

混合的截图，以防你没看清。

- doitlikejustin

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

- Hugo Silva

Answer 5

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

- user2678335

---

欢迎来到Stackoverflow。需要添加更多的解释和示例 ;) - Maxime Lorant