レンダリングされたドキュメントにCSSの空白が改行されないようにするにはどうすればよいですか？

Question

<p>タグ内のwhite-space: nowrap;がCSSでスパンの先頭に改行を挿入しないようにするにはどうすればよいですか？

私はこれを行うには、行の高さの計算を使用するソリューションについて読んだ

など、検索結果の抜粋の最後の行に楕円を入れて、それをデスクトップ上に見栄え持って、携帯したいのですが、それは壊れやすく、おそらくハッキリと思われる。

私は2つの領域のコンテンツを作成し、text-overflow: ellipsis;を2番目のものに入れたいと思っています。私が望む効果を得ることができます。

私が問題になるのは、white-space: nowrap;をスパンの先頭に改行したときです。 ！ここで問題in a fiddle

を置くための@DaniPへ:(

Hatの先端には、私の検索結果テンプレートです：ここで

<a href="/some-url/" class="search-result"> 
    <div class="well"> 
     <h4>title</h4> 
     <p>See All Selfies Taken with iPhone Camera 
Ready to see every selfie taken with the iPhone camera on a device? Here’s all you need to do: 
1 Open the Pho<span>tos app as usual but tap on the “Albums” button 
2 From the “Albums” view (tap back to Albums if you’re in Camera Roll), scroll down to find the “Sel</span></p> 
    </div> 
</a> 

はSASS

.search-result {  
    p { 
     overflow: hidden; 
     text-overflow: ellipsis; 
     span { 
      white-space: nowrap; 
     }  
    } 
} 

であり、ここで何です次のようになります。

title 
See All Selfies Taken with iPhone Camera Ready to see every selfie taken with the iPhone camera on a device? Here’s all you need to do: 1 Open the Ph 
tos app as usual but tap on the “Albums” button 2 From the “Albums” view (tap back to Albums if you’re in Camera Roll), scroll down to find the “Sel 

ここ

は、私はそれはそれは改行を入れていない

title 
See All Selfies Taken with iPhone Camera Ready to see every selfie taken with the iPhone camera on a device? Here’s all you need to do: 1 Open the Photos app as usual but tap on the “Albums” button 2 From the “Albums” view (tap back to Albums if you’re in Camera Roll), scroll down to find the “Sel 

Answer 1

white-space: nowrap;（無改行）の後に見てみたい方法です。これは、 "大きな単語"のように長い破られないテキスト行を作成するので、前のテキストが壊れます。 <p>要素にwhite-space: nowrap;を入れてください。