WEB技术之前端技术

CSS自动换行、强制不换行、强制断行、超出显示省略号

PHPer 2018-02-11 130次浏览 0条评论 0 0 0
P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试...

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断。

先给出各种方式,再具体介绍每一个属性。
强制不换行
p { white-space:nowrap; }

自动换行
p { word-wrap:break-word; }

强制英文单词断行
p { word-break:break-all; }

*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。

超出显示省略号
p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。...

登录 | 立即注册

更新于:2018-02-13 22:01:39
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    CSS3知识整理

    transition 属性 将鼠标悬停在一个div元素上,逐步改变表格的宽度从100px到300px:: div { width:100px; transition: width 2s...

    transition属性-CSS3知识整理

    Bootstrap-排版

    Bootstrap-响应式工具

    CSS3的rem详解及使用方法 - CSS3知识整理

    详解代理自动配置 PAC

    function FindProxyForURL(url, host) 在v2ray的pac.txt文件里找到了,ok的。

    WEB技术

    什么是WEB技术?下面会分前端技术和后端技术分别探讨。20180203未完待续。

    WEB技术之前端技术

    WEB技术之后端技术

    WEB应用转手机APP,手机APP制作平台推荐

    WEB应用与手机APP

    Android相关

    2017 年 Web 开发工程师技术发展路线图

    富文本编辑器

    个人比较喜欢的是 Redactor,还有Simditor、wangEditor和 bootstrap-wysiwyg,这些富文本的UI都很好看,特别是Redactor和Simditor,不过Simditor扩展并不丰富。...

    富文本编辑器Redactor在Yii2中的应用

    推荐内容

    MySQL数据库设计总结

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字...

    什么是B-Tree

    二叉查找树、平衡二叉树、红黑树、B-/B+树性能对比

    使用Yii2遇到的问题整理

    Yii的东西很多,学习和使用的时候遇到了各种各样的问题,这里记录整理下,方便大家分享。composer安装kartik-v/yii2-mpdf时报错,这里记录下 Yii2用compos...

    Yii2用composer更新时遇到的错误

    Yii2 用composer update 时提示'git' 不是内部或外部命令,也不是可运行的程序或批处理文件

    Yii2​用composer安装kartik-v/yii2-mpdf时报错,成功解决后,再让其支持中文。

    使用Yii2的setFlash和bootstrap.min.js遇到的问题,bootstrap.min.js的bug?

    Yii2的action不支持大小写吗?其实是支持的

    composer install 使用tips-网上找的composer install的使用技巧方法

    关于编程时遇到意想不到的错误如何解决

    比如当你写的一个php脚本执行出现问题,如果你的脚本里自己带了对错误的处理,可能会显示那里出错了。或者你用的框架,框架里有debug模式,会报错。

    使用Laravel 5.4问题总结

    这里写下laravel5.4的总结,用laravel也有段时间了,优点就不用多说了,好上手,较易学较易用,blade模板是非常的好用,等等。laravel的缺点有几个,灵活性一般,框架稍...

    使用Laravel 5.4问题总结 Lost connection to MySQL server at 'reading initial communication ...

    Laravel 5.4各种错误提示总结

    localStorage介绍和使用

    一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(co...

    localStorage的使用

    localStorage其他注意事项