ブートストラップを使って1行にテキストを表示する最も良い方法

Question

私はスタイリングの問題に直面しています。 テキスト行を1行にまとめる最も良い方法は何ですか？問題の スクリーンショット：

私のコードはかなり単純です：

<section id="key-features" class="key-features"> 
     <div class="container"> 
      <h2>Key Features</h2> 
      <div class="col-md-4 col-sm-4 col-xs-12"> 
       <ul> 
        <li><img src="images/icons/1.png" alt="Atmospheric pressure test"/>Atmospheric pressure test</li> 
        <li><img src="images/icons/compass.png" alt="Altitude monitor"/>Altitude monitor</li> 
        <li><img src="images/icons/alc.png" alt="Temperature"/>Temperature test</li> 
        <li><img src="images/icons/hr.png" alt="Heart rate"/>Heart rate monitor</li> 
        <li><img src="images/icons/shoe.png" alt="Pedometer"/>Pedometer</li> 
       </ul> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12 pull-left"> 
       <ul> 
        <li><img src="images/icons/food.png" alt="Calorie"/>Calorie</li> 
        <li><img src="images/icons/location.png" alt="Distance"/>Distance</li> 
        <li><img src="images/icons/sleep.png" alt="Sleep monitor"/>Sleep monitor</li> 
        <li><img src="images/icons/bell.png" alt="Sedentary remind"/>Sedentary remind</li> 
        <li><img src="images/icons/drink.png" alt="Water drink remind"/>Water drink remind</li> 
       </ul> 
      </div> 
      <div class="col-md-4 col-sm-4 col-xs-12 pull-left"> 
       <ul> 
         <li><img src="images/icons/alarm.png" alt="test"/>Alarm remind</li> 
         <li><img src="images/icons/phone.png" alt="Call remind"/>Call remind</li> 
         <li><img src="images/icons/camera.png" alt="Photograph"/>Photograph</li> 
         <li><img src="images/icons/dna.png" alt="Share moments"/>Share moments</li> 
         <li><img src="images/icons/bt.png" alt="Anti-los"/>Anti-lost</li> 
       </ul> 
      </div> 
     </div> 
    </section> 

Answer 1

」overflowのCSSを使用して、あなたの要素が多少固定boundriesを持っている必要があります。プレーンテキストを書いているので、ブラウザが自動的に新しい行にラッピングして、要素の境界線を超えています。これを無効にするには、まずwhite-space: nowrap;を使用する必要があります。その後、overflow: auto;を実行してオーバーフローを進めることができます。あなたは何かが奇妙である場合は、手動でチェックするために持っているか、いないいないので、あなたは、あなたのli要素のすべてにそれを必要とするので

、あなたがそうしたい：

li { 
    overflow: auto; 
    white-space: nowrap; 
} 

あなたのテキストがオーバーフローいけません要素の内部をスクロールして不足しているコンテンツを表示することができます。 Demo

Answer 2

私はこのコードを使用することをお勧めします。このコードはテキストの折り返しを防止するだけでなく、テキストの長さが一定の制限を超えた場合に長いテキストの末尾に楕円を追加することによって、

li { 
    width: 400px; /* change this according to your layout */ 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

あなたがここに住ん例だけでなく、他のソリューションを見ることができます - http://www.tutorialrepublic.com/css-tutorial/css3-text-overflow.php