繁体   English   中英

CSS如何用点换行

[英]css how to wrap text with dots

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

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

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

“ ........................................... ................................................... ................................................... ................................................... ................................................... ................................................... ............''

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

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

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

这是IE中的输出

在此处输入图片说明

知道如何解决带点包装问题吗?

<!DOCTYPE html>
<html>

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

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

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

让我知道这是否适合您! 这个工作了吗? 如果是这样,请投票! :)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM