テキストを1行にとどめるようにする

Question

私は、水平に隣接している（そして<li>に含まれる）テキストの2つのセクションがある状況があります。正当な正当な理由があるタイトルがあり、次に右に浮かぶ距離があります。私はこれらが何であれ同じ行にとどまることを望みます。理想的には、「タイトル」セクションはoverflow:ellipseを使用し、画面サイズの狭さにかかわらず「距離」セクションが適切に表示されます。

ので、

|----------------------------------| 
|This title is too lo... 4.9 miles| 
|Short title    2.4 miles| 
|...        | 
|----------------------------------| 

私はdisplay: tableを使っ含め、これを達成するにはいくつかの方法を、試してみました。私はこの結果を正確に達成することができませんでした。これは私が現在持っているものである。

HTML：

<li <?php echo $theme; ?>> 
    <a href='#' onclick="load_page('<?php echo $listingurl;?>')"> 
     <span class='container'> 
      <span class='name'> 
      <?php echo $name;?> 
      </span> 
      <span class='distance'> 
      <?php echo $distance;?>&nbsp;mi</span> 
      </span> 
     </span> 
    </a> 
    </li> 

以下/ CSS：

.container { 
    display: table; 
    > span { 
    display: table-cell; 
    } 
} 

.name { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

.distance { 
    float:right; 
} 

Answer 1

あなたはwhite-space: nowrap;を試したことがありますか？

li { 
    white-space: nowrap; 
} 

<ul> 
    <li> 
    <span class="title">The Title Is Kinda Long I Guess</span> 
    <span class="distance">4.5 miles</span> 
    </li> 
</ul> 

https://jsfiddle.net/Lu64d6w5/

Answer 2

ジャスト空白ルールで遊びます。 コンテナにこのCSSルールを与えるようにしてください：

white-space: nowrap; 

W3によると：

NOWRAP：空白の配列が単一 空白に崩壊します。テキストは決して次の行に折り返されません。テキストは
タグが出現するまで同じ行に を続けます