如何做到又能用pre,又能用自动换行?

简介: 在构建个人网站页面时,从CSDN博客抓取下来的博客内容中的标签中的回车换行丢了,导致在新页面中显示为长长的一行,这可怎么得了。方法一:后台代码执行内容替换,把文本中的换行符全部替换成标签:方法二:加上这段CSS,标签就不会撑破网站了pre{white-space: pre-wra...

在构建个人网站页面时,从CSDN博客抓取下来的博客内容中的<pre>标签中的回车换行丢了,导致在新页面中显示为长长的一行,这可怎么得了。

方法一:

后台代码执行内容替换,把文本中的换行符全部替换成<br />标签

<%= content.Replace("\n","<br />") %>

方法二:

加上这段CSS,<pre>标签就不会撑破网站了

pre{
white-space: pre-wrap;       
white-space: -moz-pre-wrap;  
white-space: -pre-wrap;      
white-space: -o-pre-wrap;    
word-wrap: break-word;       
}


最好还是用这种方法吧!我用这种方法轻松搞定。

记得刷新清缓存哦,不然可能不生效,

不过你可以使用开发者工具,

一看就知道浏览器加载的是不是最新的内容了。

目录
相关文章
|
7月前
|
人工智能 弹性计算 前端开发
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?
|
3月前
|
Linux Docker 容器
10-24|如果我这两个都配置了privileged:true我后边加的这个管用吗
10-24|如果我这两个都配置了privileged:true我后边加的这个管用吗
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
209 0
简单粗暴理解clip属性
简单粗暴理解clip属性
159 0
|
SQL Oracle 关系型数据库
测试3——探究shrink和move原理
shrink操作的机制: 我们接下来讨论一下shrink的实现机制,我们同样使用讨论move机制的那个实验来观察.SQL> create table TEST_HWM (id int ,name char(2000)) tablespace ASSM;T...
958 0
UITableViewStyleGrouped模式下烦人的多余间距
UITableViewStyleGrouped模式下烦人的多余间距
250 0
|
程序员
如何在Flutter中使Expanded中的文本可滚动以及扫描条形码打开链接
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。 接下来的一段时间我会与大家分享flutter开发中的 每日两个小技巧 如何在Flutter中使Expanded中的文本可滚动 我正在忙着用闪存卡构建一个应用程序,其中包含有关它们的信息,但我遇到了一个我似乎无法弄清楚的愚蠢问题。
249 0
如何在 Flutter 中使 Expanded 中的文本可滚动
如何在 Flutter 中使 Expanded 中的文本可滚动
128 0
Bootstraptable页面上同时存在多条垂直滚动条,margin和padding无法消除页面间隙的解决办法!
控件:bootstraptable存在的问题:页面上同时存在多条垂直滚动条,margin和padding无法消除页面间隙。解决办法:1.关键词 overflow:hidden;2.结合页面高度设置;3.
1613 0
下一篇
DataWorks