如何在不换行div的情况下将文本保持在一行上？

Question

这是我正在尝试做的JSFiddle 。 我希望两个句子都在一行上，如果它们不在页面上，则省略号。 这适用于第一个句子，但是第二个句子使整个inner2 div（如果被切断）会被压低。 我的代码也在下面。

澄清：仅当窗口很小时才会发生这种情况。 整个inner2 div会跳到图片下方，而应改为省略两行文本。 我希望两行文字都在图像的右侧，并垂直居中。

更新：正如安德鲁·克洛迪（Andrew Clody）发布的那样， 这个JSFiddle与我想要的结果非常接近。 div不再跳转，但是第二行文本不为椭圆形。 我的愿望是使两行文本都变成椭圆形。

<html>
<header>

<style type="text/css">
.outer
{
}
.inner1
{
    float:left;
    width:80px;
    height:80px;
    background-image:url('http://www.google.com/favicon.ico');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.inner2
{
    display:table-cell;
    height:80px;
    padding-left:10px;
    vertical-align:middle;
}
.text1
{
    padding-right:5px;
    float:left;
    font-weight:bold;
}
.text2
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
</style>

</header>
<body>

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2">
        <div class="text1">This long sentence</div>
        <div class="text2">should definitely all be on one line</div>
        <div class="text2">This should all be on the next line and not wrap</div>
    </div>
</div>

</body>
</html>

Answer 1

您可以为此使用spanns。 检查出来： 提琴

<span class="event">Event here</span> <span class="genre">Genre here</span>
    <span class="something">Maybe something more</span>

.event{
    color:blue;
    font-size:20px;
}

.genre{
    color:green;
    font-size:15px;
}
.something{
    font-size:12;
    color:red;
}

编辑//这是很好的小提琴:) 演示

Answer 2

我认为.inner2类上的display:table-cell是导致问题的原因。

我意识到您正在使用它来使文​​本垂直居中-但这也可以通过顶部填充来实现。

我还添加了overflow：auto来触发inner2类上的块格式上下文，以便它占用剩余的水平空间。 有关更多信息，请参见此处 。

这是未更新的小提琴

Answer 3

要获得我认为您要搜索的行为，父级必须为表行。

.outer
{
    display:table-row;
}

编辑：新叉

http://jsfiddle.net/4Scq7/

Answer 4

只需将div放在inner2 div之外即可，它就可以工作，因为它不会浮动（换行）

jsfiddle.net/TFL5y/3/