这篇文章主要讲解了“怎么用div+pre标签的组合实现文本原格式显示与自动换行”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用div+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>
感谢各位的阅读,以上就是“怎么用div+pre标签的组合实现文本原格式显示与自动换行”的内容了,经过本文的学习后,相信大家对怎么用div+pre标签的组合实现文本原格式显示与自动换行这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网页题目:怎么用div+pre标签的组合实现文本原格式显示与自动换行
分享路径:https://www.cdcxhl.com/article38/ispjpp.html
成都网站建设公司_创新互联,为您提供商城网站、软件开发、网站建设、外贸网站建设、做网站、动态网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联