Question

这是我正在尝试做的JSFiddle。我希望每个句子都在一行上，如果它们在页面上运行则会椭圆化。这适用于第一个句子，但是第二个句子会使整个inner2 div在被切断时被推下来。我的代码也在下面。

澄清：只有当窗口非常小时才会发生这种情况。整个inner2 div跳到图像下方，而不是它应该椭圆化两行文本。我希望两行文本都在图像的右侧，并且垂直居中。

更新：正如Andrew Clody发布的那样，this 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。检查出来：fiddle

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

编辑//这里是个小提琴:) Demo

Answer 2

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

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

我还添加了overflow：auto来触发inner2类的块格式化上下文，以便占用剩余的水平空间。有关详细信息，请参阅here。

此处未更新 fiddle

Answer 3

为了获得我认为你正在寻找的行为，父母需要是一个表格行。

.outer
{
    display:table-row;
}

编辑：New Fork

http://jsfiddle.net/4Scq7/

Answer 4

只需简单地将div放在inner2 div之外就行了，因为它不会浮动（换行）

jsfiddle.net/TFL5y/3 /

如何在不包装div的情况下将文本保留在一行中？

4 个答案: