css 如何用点将文本换行

Question

这看起来重复但没有找到解决我的问题的答案，因此发布。

基本上我想使用 css 换行文本，这是我想换行的示例文本

"This is really really long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long sentence"

"........................................................................................................................................................................................................................................................................................................................................."

以下 css 在所有浏览器中正确换行第一行（这真的很长....句子）。

第二行，多点，仅在chrome浏览器中包裹，其余浏览器，如edge、firefox、IE，显示单行点

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

这是 IE 中的输出

知道如何解决点的环绕问题吗？

Answer 1

像这样围绕您的内容创建一个 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;}

让我知道这是否适合您！这个有用吗？如果是这样，请投票！ :)

Answer 2

<!DOCTYPE html>
<html>

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

<body>
<p class="wrap-line-content">......................................</p>
</body>
</html>

css 如何用点将文本换行

css how to wrap text with dots

html

css

word-wrap