您的位置: 开心技术乐园 > 技术仓库 > 网站技术 > 阅读文章

CSS pre 标签内实现自动截断换行

  我用的是“pre”标签,但是我发现用上去后有问题,它只是一行显示,如果里面的代码太长,它不会自动截断,另起一行。那么这个 .pre 应该怎么写呢?我CSS基本能看懂,但是不会写。我想到了参考 itellyou 上的,我发现它里面也是用 pre 来作为下载链接的CSS的。

  在 Chrome 浏览器上右击“检查”,都能看到,包括它 .pre 的代码,如下:

pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.428571429;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}

但是我发现按照上面的写了之后,还是不会自动截断。后来我观察到它后面还有一段:

pre {
white-space: pre-wrap;
}

这个很重要啊!!!加上之后就 OK 了,最终我的代码是这样的:

pre{display: block;word-break: break-all;word-wrap:break-word;white-space: pre-wrap;border:1px dotted #C8D8F2;font-size:12px;padding:5px;margin:2px 0 0 0;line-height: 1.428571429;border-radius: 4px;}

后面的“border-radius”很重要,有圆角效果哦!

    • 本文标签:
    • 人气热度:195
    • 生产日期:2019年4月18日 - 23时36分10秒