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经常是修改完后,重启又失效了. 本 ...
随机推荐
- ACM/OI 出题用
之前出题,很苦恼出数据和检查程序,因为很多繁琐的工作,还很可能小手一抖出问题. 最近又在出题...想起之前的对拍脚本,感觉不能更方便,于是撸了一套出题用的小工具,也学习了一点点的DOS命令 首先是输入 ...
- EOJ 3 玩具谜题
小南有一套可爱的玩具小人,它们各有不同的职业. 有一天,这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时 singer 告诉小南一个谜题 ...
- MyEclipse 安装svn 插件步骤详情
方法一:在线安装 打开HELP- > MyEclipse Configuration Center.切换到SoftWare标签页. 点击Add Site 打开对话框,在对话框Name输入Svn, ...
- linux下服务启动脚本
#!/usr/bin/env python# -*- coding: utf-8 -*-# @File : deployment.py# @Author: Anthony.waa# @Date : 2 ...
- 一个javascript面试题解析
; function fn(){ console.log(this.length); } var obj = { length: , method: function (fn) { fn(); // ...
- ScrollView和ListView滑动冲突问题
1.在ScrollView里面嵌套ListView时,ListView的滑动事件无法响应. 先看下事件分发的过程: 由父View层的 onInterceptTouchEvent 到中间层的on ...
- Codeforces Round #283 (Div. 2) A
解题思路:给出一个递增数列,a1,a2,a3,-----,an.问任意去掉a2到a3之间任意一个数之后, 因为注意到该数列是单调递增的,所以可以先求出原数列相邻两项的差值的最大值max, 得到新的一个 ...
- 十款APP开发框架
对于大部分Web开发人员,HTML.CSS和 Java是他们最熟练的开发技能.然而,开发一个原生的移动App,对他们来说却是完全陌生的领域.因为开发Android,iOS 或 Windows Phon ...
- EFCore笔记之查询数据
查询数据 基础查询,Linq100实例: https://code.msdn.microsoft.com/101-LINQ-Samples-3fb9811b using (var context = ...
- java文件名与class关系
class与文件名没有必要关系但是public class是要绝对保持一致 例如:class test{ public static void main(String args[]){ System. ...