div+pre标签的组合实现文本原格式显示与自动换行

最新推荐文章于 2024-03-30 10:54:28 发布

ruru7989

最新推荐文章于 2024-03-30 10:54:28 发布

阅读量3.2k

点赞数

分类专栏： html--基础

html--基础专栏收录该内容

0 篇文章 0 订阅

订阅专栏

不使用textarea 和repalce 成<br>的一个原因是不好控制文本高度和宽度；

被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

而为了限制文本显示的范围，一般使用div+css设定自动换行或缩略等样式。对于未知的文本格式，如果要求文本单行过长时换行显示，并且保留原文本的空格和换行符，就可以通过div+pre标签的组合，再分别设定各自的样式来实现（pre标签一般不适用width属性）

<div>
       <pre>
       你想放放入的内容，可以保留空格和换行符 O(∩_∩)O~
       </pre>
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ruru7989

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html中p标签之间如何换行,用Javascript给文本段落加上p标签实现换行

weixin_39694264的博客

06-09

1727

最近在用node重写我的博客(憔悴了许多)，既然从wordpress转过来的，wordpress基本功能还是不能变的，无形中加大了开发难度。比如说加密算法，数据表关系串联，数据库高并发IO性能优化。。。等等一大堆需要解决的问题，要做就要做最好的，用最优的方法，最快的算法，最安全的code来以太阳肩并肩。起初以为增删改查就完事了，其实没那么简单。就连读取文章看似很简单的事情其实并不是想象那样，直接从...

pre 自动换行的问题

09-27

本站文章中使用了 pre 格式输出代码。而浏览器默认是强制不换行输出 pre 里的内容。这样的话，代码一长就出现了撑到页面外部的样子。在之前我都是有意的在代码里强制换行... 累啊. 今天有意的google了下，找到了： [code]pre { whitewhite-space: pre-wrap; /* css-3 */

参与评论您还未登录，请先登录后发表或查看评论

【HTML】让<pre>标签文本自动换行

jishublog

09-06

1518

利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的，不用和<BR>等来表示空格或者回车了。但是，默认情况下，<pre /> 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。下面提供符合 W3C 标准...

pre 标签自动换行

MeiLiCongLin的博客

07-31

6911

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界，如果用overflowhidden那么会将原来的代码隐藏掉，用overflowauto则会出现滚动条，代码也不方便阅读。被包围在pre元素中的文本通常会保留空格和换行符。inherit规定应该从父元素继承white-space属性的值。pre空白会被浏览器保留。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。.........

CSS实现pre标签中内容换行方法

weixin_33850015的博客

04-24

876

为什么80%的码农都做不了架构师？>>> ...

html内容超出了div的宽度如何换行让内容自动换行

09-25

在CSS中，控制文本换行的属性主要包括word-wrap和word-break。 1. word-wrap属性该属性用于指定当一个单词长度超过了容器的宽度时是否可以被拆分到下一行。此属性有两个主要值： - normal：单词不会被拆分，若...

html -- pre标签内容如何自动换行？

Dark_programmer的博客

04-02

5897

在一些特殊的排版中，我们期望显示的内容能够和代码里的格式展示的一致。但是如果长度太长的话可以自动化行,而pre标签默认是不给换行的。代码如下： <template> <div class="pre_container"> <pre> 而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:a

pre标签使用与自动换行

最新发布

猿始森林

03-30

2555

pre标签是HTML中的一个标签，主要用于显示预格式化的文本。当文本包含在标签中时，浏览器会保留文本的空格和换行符，并将其显示为等宽字体。

html pre标签使文本自动换行

09-25

该CSS方案可让pre标签内的文本自动换行，我在我有的浏览器上都测试了一下，全部支持，IE6，IE7,IE8,Firefox,Opera,Safari和Chrome。

pre标签内容换行

月来better

03-26

476

css： pre{ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet

pre自动换行输出

阳水平的博客

02-28

768

一般情况下，pre原格式输出代码是不会自动换行的，体验很不好，很容易超出屏幕宽度，百度了以下，亲自测试以下代码可行，分享出来！pre { whitewhite-space: pre-wrap; /* css-3 */ whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */ whitewhite-space: -pre-wrap; /

pre标签实现自动换行

Future1994的博客

12-20

481

pre自动换行_笔记大全_设计学院

＜pre＞标签换行

weixin_44017345的博客

01-13

503

为了保留文本格式显示，使用了标签，发现内容到边界不会自动换行。 css 添加：white-space: pre-wrap;后解决。 <div style="width: 80%;border-style:solid;margin-left: 10% "> <pre style="font-size: 20px;white-space: pre-wrap;"> <p th:text="${text1}">文章内容&

html标签pre让内容换行

hqmln的博客

05-09

301

< pre>标签不会自动换行，使用起来比较麻烦，不过现在确实已经很少用这个标签了。但是如果用到的时候，需要换行怎么办？这里有一个用CSS来解决< pre>标签换行的问题，支持各种浏览器，还支持css3呢。 pre{ white-space:pre-wrap; /* css-3 */ white-space:-moz-pre-wrap; /* Mozill...

如何让＜pre＞自动换行。

qq_41424132的博客

04-17

1028

pre { white-space: pre-wrap; word-wrap: break-word; } pre标签对于表示数据库种有换行的大段文字非常有用，添加这段css后pre之间的文字就会自动换行了。感谢：Pre标签 自动换行 - 那年、仲夏 - 博客园 (cnblogs.com) ...

[html] 如何让pre标签中的元素自动换行？

歌谣的博客

03-29

378

[html] 如何让pre标签中的元素自动换行？ pre{ white-space:pre-wrap; /* css3.0 / white-space:-moz-pre-wrap; / Firefox / white-space:-pre-wrap; / Opera 4-6 / white-space:-o-pre-wrap; / Opera 7 / word-wrap:break-word; / Internet Explorer 5.5+ */ } 个人简介我是歌谣，欢迎和大家

div中p标签自动换行

05-24

在HTML中，p标签是一个块级元素，它默认会在前后自动添加一定的间距，并且会自动换行。因此，如果你把p标签放在一个div中，它也会自动换行。如果你想要控制p标签的换行方式，可以使用CSS样式来设置。比如，可以给p标签添加样式"white-space: pre-wrap;"，这样可以保留文本中的空格和换行符，并且自动换行。另外，你还可以使用"word-wrap: break-word;"来允许单词内换行，这样长单词就可以在div内自动换行了。