css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的
想让文字换行必须要写的那几个css样式就略过了。当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,这时候加个word-wrap:break-word;就基本可以解决但是有种情况是它解决不了的。
这里是项目中遇到的问题,朋友们如果没遇见也没事加深印象即可:前台页面用户输入文字的时候没有换行没有空格,文字传给后台,但是这些文字再一次原样输出(pre标签)传到前台页面时就会出现不换行的局面。
简单的说就是<pre>标签文字无法用word-wrap:break-word换行的。示例如下:

结果:
方法:在样式里面加上white-space:pre-line或者white-space:pre-wrap就可以轻松解决

css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的的更多相关文章
- A space or line break was encountered after the "@" character. Only valid identifiers, keywords, comments, "(" and "{" are valid at the start of a code block and they must occur immediately following
mvc 控制器调用分布视图出错,("A space or line break was encountered after the "@" character. Only ...
- sed高级用法:模式空间(pattern space)和保持空间(hold space)
摘自:https://blog.csdn.net/ITsenlin/article/details/21129405 sed高级用法:模式空间(pattern space)和保持空间(hold spa ...
- CSS 文字换行与不换行
1. 强制不换行 p{ white-space:nowrap; } 2. 自动换行 p{ word-wrap: break-word; word-break: normal; } 3. 强制英文单词断 ...
- css 文字换行控制
强制不换行 white-space:nowrap 强制不换行,并显示省略号 word-wrap: normal; text-overflow: ellipsis; white-space: nowra ...
- CSS文字换行详细解说
本文列举了兼容 IE 和 FF 地换行 CSS 推荐样式,详细介绍了word-wrap同word-break地区别.兼容 IE 和 FF 地换行 CSS 推荐样式: 最好地方式是 word-wrap: ...
- css 文字换行
换行word-wrap: break-word 新起一行对长单词进行断句word-break:break-all 本行对长单词进行断句 不换行,强制一行white-space:nowrap table ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- delphi 修改代码补全的快捷键(由Ctrl+Space 改为 Ctrl + alt + Space)(通过修改OpenTool生效)
delphi 的IDE快捷键与输入法切换键中突,以往的解决方法是下载一个ImeTool修改 windows 系统的快捷键 在 xp win7 都好使,但在win 10经常是修改完后,重启又失效了. 本 ...
随机推荐
- 【HDU 2176】 取(m堆)石子游戏
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=2176 [算法] Nim博弈 当石子数异或和不为0时,先手必胜,否则先手必败 设石子异或和为S 如果 ...
- HTML、CSS和JS中注释类型的总结
添加必要的注释,是一个优秀的程序员必须具备的好习惯,可以大大提高代码的可维护性.可读性. 1.HTML注释 <!--注释的内容--> 注释的地方(根据个人习惯可能有所不同): 结束标签的后 ...
- ROS-Gazebo-turtlebot3仿真
前言:Gazebo是一款强大的3D仿真器,支持机器人开发所需的机器人.传感器和环境模型,并且通过搭载的物理引擎可以得到逼真的仿真结果.即便Gazebo是一款开源仿真器,却具有高水准的仿真性能,因此在机 ...
- Centos下MongoDB数据库的安装以及配置开机自启动(三)
最近写了一个用node来操作MongoDB完成增.删.改.查.排序.分页功能的示例,并且已经放在了服务器上地址:http://39.105.32.180:3333. 在服务器上完全可以用yum来安装管 ...
- 修改WebAPI路由控制访问
1.方式一:修改RouteConfig.cs文件 2.方式二:通过在方法上方添加[Route("api/XXXX")]来控制
- onTouchEvent事件
@Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTIO ...
- HDU 1203 I NEED A OFFER!【01背包】
解题思路:攒下的钱n相当于包的容量,然后是m个学校的申请费用,申请费用相当于每一个物品的消耗,得到offer的概率相当于每一个物品的价值. 因为要求的是至少得到一份0ffer的概率的最大概率,可以转化 ...
- UTC时间和各个地区的时间到底是怎么回事
就不分析了,直接写结论 1.同一个时间点全球各地的时间戳是一致的 2.同一个时间戳在不同的时区对应不同的时间 依北京时间为例: 当前时间为 Tue Jan 23 2018 19:02:11 GMT ...
- Java入门基础—面向对象开发
Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向对象编程语言的代表 ...
- 粘包解决高端_Client
from socket import * #导入套接字模块的所有命令import struct #导入struck模块,用于封装数据流长度# from functools import partial ...