CSS实现文字换行
强制不换行:div{ white-space:nowrap; }
自动换行: div{ word-wrap:break-word; word-break:normal; }
强制不换行
white-space : normal | pre | nowrap | pre-wrap | pre-line | inherit
normal ; 默认。空白会被浏览器忽略。
pre : 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap : 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap:保留空白符序列,但是正常地进行换行。
pre-line:合并空白符序列,但是保留换行符。
inherit:规定应该从父元素继承 white-space 属性的值。
设置强行换行
word-break : normal | break-all | keep-all
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
CSS实现文字换行的更多相关文章
- css控制文字换行
1.word-wrap 设置为break-word时,文本中的长单词或url可以换行 <p style="width:100px;word-wrap:break-word;border ...
- css 段落文字换行问题
项目中遇到的一个小问题,以前没有注意到: 超链接超出父级元素,想着给a标签加宽度但是没有效果... 后来发现两个很好用的css属性 1.word-wrap 用来控制换行 取值: (1)normal ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的
想让文字换行必须要写的那几个css样式就略过了.当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,这时候加个word-wrap:break-word:就基本可以解决但是有种情况是它解决不了的 ...
- css 文字换行控制
强制不换行 white-space:nowrap 强制不换行,并显示省略号 word-wrap: normal; text-overflow: ellipsis; white-space: nowra ...
- 【CSS】【1】让DIV中的文字换行显示
<div style="white-space:normal;word-break:break-all;word-wrap:break-word;">data</ ...
- CSS文字换行详细解说
本文列举了兼容 IE 和 FF 地换行 CSS 推荐样式,详细介绍了word-wrap同word-break地区别.兼容 IE 和 FF 地换行 CSS 推荐样式: 最好地方式是 word-wrap: ...
- CSS 文字换行与不换行
1. 强制不换行 p{ white-space:nowrap; } 2. 自动换行 p{ word-wrap: break-word; word-break: normal; } 3. 强制英文单词断 ...
- css 文字换行
换行word-wrap: break-word 新起一行对长单词进行断句word-break:break-all 本行对长单词进行断句 不换行,强制一行white-space:nowrap table ...
随机推荐
- 掌握numpy(三)
统计功能 前面都是介绍numpy的一些特性,被称为数学运算神器怎么能少了统计功能呢 ndarray的方法 a = np.array([[-2.5, 3.1, 7], [10, 11, 12]]) &g ...
- 插入排序-Python与PHP实现版
插入排序Python实现 import random a=[random.randint(1,999) for x in range(0,36)] # 直接插入排序算法 def insertionSo ...
- java二进制相关基础
转载请注明原创出处,谢谢! 说在前面 之前在JVM菜鸟进阶高手之路十(基础知识开场白)的时候简单提到了二进制相关问题,最近在看RocketMQ的源码的时候,发现涉及二进制的内容蛮多,jdk源码里面也是 ...
- layer,Jquery,validate实现表单验证,刷新页面,关闭子页面
1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...
- 【jQuery插件】使用cropper实现简单的头像裁剪并上传
插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...
- Laravel框架使用的一些注意细节(一)
1.资源路由RESTful 当你不想编写太多的路由的时候,肯定会用到RESTful资源控制器.但当你使用资源控制器的时候,需要注意的是,你的资源路由的名字不能与public目录下的文件有重名,否则会导 ...
- 深入理解php内核 编写扩展 II:参数、数组和ZVALs
原文:http://devzone.zend.com/article/1022-Extension-Writing-Part-II-Parameters-Arrays-and-ZVALs Part I ...
- “IAsyncOperation<StorageFile>”不包含“GetAwaiter”的定义
错误 CS4036 "IAsyncOperation<StorageFile>"不包含"GetAwaiter"的定义,并且找不到可接受类型为&quo ...
- mybatis中使用if标签比较两个字符串是否相等
<!-- 此处使用if比较是否相等 --> 范例一: <select id="findClientIds" parameterType="map&quo ...
- C++ stack
stack 栈,一种后进先出的数据结构,在c++ stl里作为容器适配器,string,vector,deque,在内存中是连续的 声明方式 stack<int,deque<T>&g ...