0

これが私がやろうとしていることのJSFiddleです。両方の文をそれぞれ 1 行にし、ページからはみ出す場合は省略します。これは最初の文では機能しますが、2 番目の文ではinner2div 全体が切り取られると押し下げられます。私のコードも以下にあります。

明確化: これは、ウィンドウが非常に小さい場合にのみ発生します。inner2代わりに、両方の行のテキストを楕円形にする必要がある場合、div全体が画像の下にジャンプします。テキストの両方の行を画像の右側に配置し、垂直方向の中央に配置します。

更新: Andrew Clody によって投稿されたように、この JSFiddleは私の望ましい結果に非常に近いものです。div はジャンプしなくなりましたが、テキストの 2 行目は楕円になりません。私の望みは、テキストの両方の行を楕円形にすることです。

<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

そのために 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;
}

編集//ここに良いフィドルがあります:)デモ

于 2013-05-16T14:24:37.947 に答える
0

div を inner2 div の外に出すだけで、フロート (ラップ) しないので機能します。

jsfiddle.net/TFL5y/3/

于 2013-05-16T14:41:50.020 に答える