white-space 标签 使用
white-space MSD定义为: 是用来设置如何处理元素中的空白
其使用场景有很多,比如:横向滑动,超出显示省略号,输出空格显示空格等
1.横向滑动
在写手机页面的过程中,我想大部分人都遇到横向滑动的问题,今天我们就来讨论一下横向滑动,其css核心为:white-space、
1.首先定义一个父容器宽度,
2.设置子元素个数,使其超过父容器宽度
3.父元素设置white-space:nowarp, overflow:hidden或 overflow-y:hidden即可
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css实现图片横向排列,溢出隐藏横向滚动</title>
<style type="text/css">
.box{width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}
.box span{display: inline-block;width: 600px;height:395px;background-color: red;}
</style>
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
如下图

2.超出显示省略号
原理:1. 先让父元素设置超出隐藏,overflow:hidden。2.再设置 white-space 强制不换行。3. text-overflow: ellipsis 超出显示省略号
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>white-space</title>
<style type="text/css">
.con {width: 500px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
</style>
</head>
<body>
<p class="con">
简单之美是透着一种禅意,如天上轻盈的白云,随缘自在;如花中纯白,清新淡雅;如冬雪初落,纯洁通透;如画中留白,给人以想象。简单,纯粹而通透,天然而不加雕琢。
</p>
</body>
</html>
3. 换行内容,换行显示
曾遇到过这样一个问题: 有一个textarea标签和pre标签,第一个输入值为第二个显示内容

当输入过长时,会出现如下问题

又查看 white-space的属性, 有一个pre-wrap和pre-line属性,就正常了

总结
今天总结了 white-space一些常用的情况, 但并非全部, 希望大家有新的案例,可以告知,谢谢!
另外,昨天看了锤子的相声, 还是一样的感慨,还是佩服老罗,希望坚果pro 可以大卖
white-space 标签 使用的更多相关文章
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- White space is required before the encoding pseudo attribute in the XML declaration.
错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...
- Java去除掉HTML里面所有标签的两种方法——开源jar包和自己写正则表达式
Java去除掉HTML里面所有标签,主要就两种,要么用开源的jar处理,要么就自己写正则表达式.自己写的话,可能处理不全一些自定义的标签.企业应用基本都是能找开源就找开源,实在不行才自己写…… 1,开 ...
- HTML5快速入门(三)—— 标签综合运用
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- source insight 保存时删除多余空格,去除多余空格 space tab键
source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...
- source insight 保存时删除多余空格,去除多余空格 space tab键【转】
转自:http://blog.csdn.net/lanmanck/article/details/8638391 上传源码时最好把空格行去掉,以前介绍了使用notepad++,现在发现,习惯用sour ...
- Engineer in the White Spaces
 Engineer in the White Spaces Michael Nygard A SySTEM ConSiSTS oF inTERdEpEndEnT pRogRAMS. We call ...
- Java开发笔记(一百二十七)Swing的标签
提起AWT的标签控件Label,那个使用体验可真叫糟糕,不但不支持文字换行,而且对中文很不友好,既可能把中文显示为乱码,还不支持博大精深的各种中文字体.所幸Swing的升级版标签JLabel在各方面都 ...
- c#文件操作
1.创建文件夹 //using System.IO; Directory.CreateDirectory(%%1); 2.创建文件 //using System.IO; File.Create(% ...
- jQuery-template.js学习
花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.e ...
随机推荐
- RESTful接口开发
package com.aaaaaa.manager.controller; import org.springframework.beans.factory.annotation.Autowired ...
- 关于vue.js的部分总结
1.MVVM和MVC的区别: MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型 模型:后端传递的数据 试图:所看到的页面 视图模型:mvvm模式的核心,它是连接vie ...
- js循环及for-in , for-of的区别
循环 字符串遍历:可通过for-of遍历字符串 for-in:遍历对象自身可继承可枚举属性 Object.keys():返回对象自身可枚举属性的键组成的数组 Object.getOwnProperty ...
- Vivado Bit文件压缩
前言 Vivado编译生成的Bit文件太大,想要小一点该咋办呢?那么就需要给bit文件瘦身. 流程 直接在约束文件xdc中添加下述语句即可: set_property BITSTREAM.GENERA ...
- iOS登录及token的业务逻辑
登录的业务逻辑 { http:是短连接. 服务器如何判断当前用户是否登录? // 1. 如果是即时通信类:长连接. // 如何保证服务器跟客户端保持长连接状态? // "心跳包" ...
- linux c 错误的捕获
经常在调用linux 系统api 的时候会出现一些错误,比方说使用open() write() creat()之类的函数有些时候会返回-1,也就是调用失败,这个时候往往需要知道失败的原因.这个时候使用 ...
- 【vue开发】 父组件传值给子组件时 ,watch props 监听不到解决方案
解决方案: watch:{ data:{ immediate:true, handler:function(){ } }} 示例:
- WeixinJSBridge目前还能够直接使用的功能(2019)
参考地址:http://mmlike.sinaapp.com/ 其余功能不是不能用了,而是有各种条件了. 以下列出的功能,均可直接使用,无需appid等任何东东,只要在手机微信网页环境中 发送邮件 W ...
- openstack安装部署——计算服务(控制节点&计算节点)前言
1.前言Openstack计算服务通过认证服务获取认证:通过镜像服务获取镜像:通过仪表盘提供的用户界面与用户交互.镜像的存取受工程和用户的限制,配额受工程的限制(例如不同工程允许虚拟机实例数量不同). ...
- docker alpine wkhtmltopdf
截止2019.08 wkhtmltopdf 还没有 alpine 的版本 如需使用 需要在 alpine 环境中编译 生成 wkhtmltopdf (使用 apk add wkhtmltopdf ...