如何阻止CSS nowrap在渲染的文檔中放置換行符？

Question

我如何停止white-space: nowrap; 在<p>標記中使用CSS在跨度的開頭放置換行符？

我想將省略號放在搜索結果摘要的最后一行，並使其在台式機，移動設備等上看起來不錯。

我已經讀過有關使用線高計算來執行此操作的解決方案，但是它似乎很脆弱，而且可能很笨拙。

我的想法是，如果我做兩個方面的內容，並把text-overflow: ellipsis; 在第二個上，我會得到想要的效果。

我的問題是當我放置white-space: nowrap; 它在跨度的開頭放置了一個換行符。 :(

帽尖到@DaniP為把問題的小提琴 ！

這是我的搜索結果模板：

<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>

這是無禮

.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

這是我希望它照看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 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>元素。