Question

这看起来很重复，但是找不到解决我问题的答案，因此发布了。

基本上我想使用css包装文本，这是我想包装的示例文本

“这真的是很长很久很久很久很久很久很久很久很久很久很久很久很久很久很久的句子”

“ ................................................... ................................................... ................................................... ................................................... ................................................... ................................................... .................................“

下面的css在所有浏览器中正确包装第一行（这真的很长。。。）。

第二行，多个点，仅在chrome浏览器中包装，其余的浏览器，例如edge，firefox，IE，则显示单行点

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

这是IE中的输出

有什么主意如何解决带点包装问题？

Answer 1

<!DOCTYPE html>
<html>

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

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

Answer 2

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

让我知道这是否适合您！这个工作了吗？如果是这样，请投票！：）

css如何用点换行

2 个答案: