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

ttx9n · 发表于 2014-2-27 16:53:33

被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。下面有个不错的示例，大家可以参考下 html的<pre></pre>标签用可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

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

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
div {
width: 100px;
white-space: normal;
}
pre {
white-space: pre-wrap; /*css-3*/
white-space: -moz-pre-wrap; /*Mozilla,since1999*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /*Opera7*/
word-wrap: break-word; /*InternetExplorer5.5+*/
}
</style>
<body>
<div>
<pre> 文本文本文本文本文本文本文本文本文本文本文本
文本
文本
文本
</pre>
</div>
</body>
</html>

czoz5y · 发表于 2022-9-6 18:24:36

看到这帖子真是高兴！

ppwxcg · 发表于 2022-9-20 03:55:42

而非为吾问无为谓娃娃

plvo189 · 发表于 2023-9-10 06:28:02

飞飞飞飞飞飞飞飞飞飞飞飞飞

btbhs8t · 发表于 2023-10-24 00:56:04

强烈支持楼主ing……

8ayoqrpj · 发表于 2023-12-8 09:50:59

的沙发水电费水电费

6hruhg · 发表于 2024-4-14 15:26:05

天天源码社区论坛

数据TG@shuju96 · 发表于 2024-7-19 20:56:29

人都不在了啊啊

sykzus · 发表于 2024-9-13 17:43:03

哦哦哦哦哦哦哦哦哦

j__j33p · 发表于 2024-9-22 10:38:13

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

账号		自动登录	找回密码
密码			立即注册

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

相关帖子