Как мне запретить CSS nowrap помещать разрыв строки в мой визуализированный документ?

#html #css

#HTML #css

Вопрос:

Как мне запретить 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>

Вот 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

Ответ №1:

Он не помещает разрыв строки. Он создает длинную неразрывную текстовую строку, похожую на «большое слово», поэтому предыдущий текст прерывается. Поместите white-space: nowrap; для <p> элемента.

1. Спасибо, что взглянули! Мне нужно поведение переноса для элемента p, чтобы получить желаемый эффект.

2. Должен ли многострочный текст предварительно сохраняться как многострочный? Потому что на данный момент это не так, и нет «последней строки», как вы упомянули. Вы хотите поставить три точки в конце вашего элемента span и все?

3. Я хочу иметь несколько строк текста (может быть, 3?), А затем многоточия в конце последней строки. Когда на мобильном устройстве, возможно, это будет больше похоже на 5 строк. Я не хочу, чтобы это было только в конце, потому что конец может быть в середине строки или в начале и т. Д. Я хочу, чтобы многоточия были в конце последней строки (хотя, как вы упомянули, их не существует_

4. Вот так? span:after { content: "..."; }

5. спасибо, что посмотрели еще раз. Я хочу, чтобы это работало так jsfiddle.net/cLk2kx02/1 но без разрыва строки на промежутке.