Pre标签 自动换行
<pre>
元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
标签的一个常见应用就是用来表示计算机的源代码。
而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。
点击查看:http://www.css88.com/demo/pre/index-1.html
今天折腾了一个晚上终于搞定<pre>
的内容自动换行的问题:
1.先尝试使用:word-wrap:break-word;
将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。
点击查看:http://www.css88.com/demo/pre/index-2.html
2.查看了pre的浏览器默认样式:
xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin: 1em 0;
}
都有这个white-space: pre,看看white-space的值:
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
有个pre-wrap,保留空白符序列,但是正常地进行换行。
这样就OK了搞定,我们只要加上样式:
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
就能使
的内容自动换行了。点击查看:http://www.css88.com/demo/pre/
Pre标签 自动换行的更多相关文章
- 让pre标签自动换行示例代码
pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码.对于技术博客经 ...
- <pre></pre>标签自动换行
原文地址:https://www.cnblogs.com/qq78292959/p/4193142.html pre { white-space: pre-wrap; word-wrap: bre ...
- 【HTML】让<pre>标签文本自动换行
利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...
- pre标签内文本自动换行
pre标签内文本自动换行 给pre标签添加一个css样式 pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* ...
- pre标签 首行会自动换行解决方案
利用pre标签可以 解决文本文档里面的空格及换行在页面上不显示的方案, 自行换行 加 white-space: pre-wrap; word-wrap: break-word; 英文字母换行 word ...
- pre强制 自动换行
转自:http://www.16sucai.com/2010/10/941.html <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会 ...
- 解决<pre>标签里的文本换行(兼容IE, FF和Opera等)
我们都知道<pre> 标签可定义预格式化的文本,一个常见应用就是用来表示计算机的源代码.被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在<pre>标 ...
- <pre>标签让<textarea>标签的内容原样输出
当通过<textarea>插数据进数据的库,取出来后都变成一行变成,用这个<pre>标签能原样输入插入时的格式. 当时要对<pre>加一些CSS样式才行啦. 以下为 ...
- css pre标签
浏览器:firfox49.0.2 在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子: 相关 ...
随机推荐
- Netty 启动过程源码分析 (本文超长慎读)(基于4.1.23)
前言 作为一个 Java 程序员,必须知道Java社区最强网络框架-------Netty,且必须看过源码,才能说是了解这个框架,否则都是无稽之谈.今天楼主不会讲什么理论和概念,而是使用debug 的 ...
- Docker配置daocloud加速器
首先注册daocloud网站的账号(免费的!!!),并登陆自己的账号,并在这里获取自己的daocloud加速器配置脚本. 获取到自己的daocloud加速器配置脚本之后只需要在已安装Docker服务的 ...
- JVM调优的总结
堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...
- Redis——基础数据结构
Redis提供了5种基础数据结构,分别是String,list,set,hash和zset. 1.String Redis所有的键都是String.Redis的String是动态字符串,内部结构类似J ...
- 创建Cordova项目 报错Error: Unhandled "error" event
cordova版本7.0以上版本 创建cordova项目错误信息 Error: Unhandled "error" event. ( Error from Cordova Fet ...
- Java 基础知识总结 3
13.java类集 类集实际上是一个动态的对象数组,与一般的对象数组不同,类集中的对象内容可以任意扩充. 类集的特征: 1)这种框架是高性能的 2)框架必须允许不同类型的类集以相同的方式和高度互操作方 ...
- 基于react的标准form+table页面的请求流程图
componentDidMount直接走handleSearch而不走loadData,是为了当form有默认初始值的时候也能适用! --------------------2018.2.7新增--- ...
- CSS3关于-webkit-tap-highlight-color属性
最近在写手机端,发现了一个问题,就是javascript点击元素时,在安卓手机上会出现半透明的蓝色背景,(经百度,在苹果手机上会出现半透明的灰色背景),后来通过百度找到了解决方案,就是利用CSS3的- ...
- 完美的nginx图片防盗链设置详解
一般,我们做好防盗链之后其他网站盗链的本站图片就会全部失效无法显示,但是您如果通过浏览器直接输入图片地址,仍然会显示图片,仍然可以右键图片另存为下载文件!依然可以下载?这样就不是彻底的防盗链了! [r ...
- android踩坑记录之view.setVisiblity()
问题 在某次做悬浮侧边栏的时候,遇到了一个问题:我用windowManager创建的悬浮侧边栏.点击中心view展开菜单,再次点击则隐藏菜单,如此简单的一个需求,却遇到了奇怪的问题,我没有对view的 ...