Question

如何阻止white-space: nowrap;标记内的<p>在CSS的开头放置换行符？

我想将椭圆放在搜索结果摘录的最后一行，让它在桌面，移动设备等上看起来不错。

我已经阅读过使用行高计算的解决方案，但这看起来很脆弱，而且可能很糟糕。

我的想法是，如果我做两个内容区域并将text-overflow: ellipsis;放在第二个区域，我将得到我想要的效果。

我的问题是当我把white-space: nowrap;放在它上面时，在一个跨度的开头放一个换行符。：（

向@DaniP小费提出问题in a fiddle！

这是我的搜索结果模板：

<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

以下是我希望它如何照顾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

它没有断线。它创建了一个长的不易破解的文本行，就像一个大字＆＃34;，所以之前的文本会中断。将white-space: nowrap;添加到<p>元素。

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

1 个答案: