如何阻止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>元素。