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

Question

How do i stop white-space: nowrap; within a <p> tag from putting a line break at the start of the span with CSS?

I want to put ellipses on the last line of a search result excerpt and have it look nice on desktop, mobile, etc.

I've read about solutions that use line height calculations to do this, but it seems fragile and possibly hacky.

My thinking is if I do two areas of content and put the text-overflow: ellipsis; on the second one I'll get the effect I want.

My problem is when I put white-space: nowrap; on it puts a linebreak at the start of the span. :(

Hat tip to @DaniP for putting the issue in a fiddle !

Here is my search result template:

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

Here is the sass

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

And here is what it looks like:

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

Here is how I want it to look after the white-space: nowrap; (no line break)

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

It doesn't put line break. It creates long non-breakable text line like a "big word", so the previous text breaks. Put white-space: nowrap; for <p> element.