html -- pre标签内容自动换行CSS纯净代码?

admin3个月前建站技巧183

在一些特殊的排版中,我们期望显示的内容能够和代码里的格式展示的一致。但是如果长度太长的话可以自动化行,而pre标签默认是不给换行的。
代码如下:

<template>
 <div class="pre_container">
   <pre>
         而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。      </pre>
 </div></template><script>export default {
 name: "preTag",
 data() {
   return {};
 }};</script>
 <style lang='scss' scoped>
 .pre_container {
 margin: 0 auto;
 width: 500px;
 border: 1px solid red;
 }
 </style>

默认效果:
在这里插入图片描述

如何实现自动换行呢?
自动换行效果:
在这里插入图片描述

只需给pre标签设置如下css即可:

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


相关文章

关于网站建设的十个策划小技巧

关于网站建设的十个策划小技巧

好多站长在网站建设的时候往往既要考虑的网站的整体美观度,同时还要考虑到网站的实用性和营销作用,那么在这方面都有什么小技巧吗,或者有什么要注意的吗,原创小编今天就为大家整理了十条关于网站建设的实用小技巧...

免费版Nginx防火墙

免费版Nginx防火墙

应用名称:免费版Nginx防火墙价格:免费作者:明国三年一场雨功能介绍:有效防止sql注入/xss/一句话木马等常见渗透攻击支持版本:Centos + 乌班图安装方法:宝塔面板安装使用教程:说明一下:...

CSS下边框阴影效果 box-shadow

CSS下边框阴影效果 box-shadow

在css中,可以使用box-shadow属性来实现下边框阴影效果,语法“box-shadow:0px 15px 10px -15px #000;”。box-shadow属性可以向框添加一个或多个阴影,...

易优apiArclist 自由文档列表使用方法

易优apiArclist 自由文档列表使用方法

apiArclist 自由文档列表 [基础用法]名称:apiArclist功能:获取系统主从表模型(如:文章、软件、图集、产品等)的一列文档,也称自由列表块标记。语法:参数:typeid=&...

CSS 文本超出隐藏,并显示省略号

CSS 文本超出隐藏,并显示省略号

可以使用overflow:hidden;来把超出的部分隐藏,使用text-overflow:ellipsis;当文本对象溢出是显示为省略号。以下是可直接使用的代码://超出一行省略号overflow:...

监控域名价格和可用性查询大汇总

监控域名价格和可用性查询大汇总

域名价格监控及可用性查询网站大汇总书签压箱货全公布本帖致力于解决:域名哪里注册便宜?域名哪里续费便宜?这个域名的其他后缀有哪些?这个域名的其他后缀还有哪些未注册?等疑难杂症。本帖所指的的【可用性】即【...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。