CSS, как обернуть текст с точками - PullRequest
Новая
       9

CSS, как обернуть текст с точками

0 голосов
/ 28 августа 2018

Выглядит дубликатом, но не нашел ответа, который решает мою проблему, поэтому отправляю сообщение.

В основном я хотел обернуть текст с помощью css, вот пример текста, который я хотел обернуть

"Это действительно очень длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный длинный предложение"

».............................................. .................................................. .................................................. .................................................. .................................................. .................................................. ................................. "

Следующая строка css переносит первую строку (это действительно очень длинное .... предложение) правильно во всех браузерах.

Вторая строка, несколько точек, переносятся только в браузере Chrome, остальные браузеры, такие как edge, firefox, IE, показывают однострочные точки 

.wrap-line-content {
        overflow: hidden;
        word-break: break-word;
        white-space: pre-wrap;
    }

Это вывод в IE

enter image description here

Есть идеи, как мы можем исправить проблему с переносом точек?

Ответы [ 2 ]

0 голосов
/ 28 августа 2018 
<!DOCTYPE html>
<html>

<head>
<style> 
.wrap-line-content {
    word-wrap: break-word;  /* important */ 
}
</style>
</head>

<body>
<p class="wrap-line-content">......................................</p>
</body>
</html>
0 голосов
/ 28 августа 2018

Создайте div для своего контента следующим образом: 

<div class="bottom-dot"><p>long long long long long long long long long long</p></div>

Тогда как CSS: 

.bottom-dot {border-bottom: 2px dotted black;}

Дайте мне знать, если это работает для вас! Это сработало? Если так, проголосуйте! :)

...