0

这是我正在尝试做的JSFiddle 。我希望两个句子都在一行上，如果它们跑出页面，则椭圆形。这适用于第一句，但第二句会使整个inner2div 如果被切断则被推下。我的代码也在下面。

澄清：这只发生在窗口非常小时。整个inner2div 跳到图像下方，而它应该省略两行文本。我希望两行文本都在图像的右侧，并且垂直居中。

更新：正如 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>
4

4 回答 4

3

您可能会为此使用跨度。看看：小提琴

<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

于 2013-05-16T14:24:37.947 回答
1

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

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

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

这里没有更新fiddle

于 2013-05-16T14:26:18.843 回答
1

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

.outer
{
    display:table-row;
}

编辑：新叉

http://jsfiddle.net/4Scq7/

于 2013-05-16T14:27:37.097 回答
0

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

jsfiddle.net/TFL5y/3/

于 2013-05-16T14:41:50.020 回答