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 ...
随机推荐
- ElementUi使用表单验证出现验证问题
问题: 使用vue element-ui中的form表单验证出现了输入框或者下拉框中明明有值, 但是却还是提示请输入或请选择,错误如下: <el-form status-icon :ref=&q ...
- jQuery组件封装之return this.each(function () {});
记录一下自己的调试历程 组件封装经常看到这么一段代码 $.fn.plugin = function (options) { return this.each(function (i,t) { new ...
- 关于NSOperationQueue,一个容易让初学者误解的问题
凡是学习NSOperationQueue的人,都会遇到setMaxConcurrentOperationCount这个函数.在网上的许多博文中,都将setMaxConcurrentOperationC ...
- win7登录密码破解方法(不用U盘)
前提:1.不借助U盘等工具.2.已将win7登录账户为test,密码为123456 1.将电脑开机关机几次,进入以下界面 2.然后点击启动修复(推荐),进入以下界面 3.接着就进入到以下界面,然后点击 ...
- graph Laplacian 拉普拉斯矩阵
转自:https://www.kechuang.org/t/84022?page=0&highlight=859356,感谢分享! 在机器学习.多维信号处理等领域,凡涉及到图论的地方,相信小伙 ...
- Scyther-Semantics and verification of Security Protocol 翻译 (第二章 2.2.2----2.3)
2.2.2 事件顺序 协议中的每个角色对应于事件列表,换句话说, 在属于角色 R 的协议事件集上施加结构,总的排序表示为 $ \prec $ , 如此任何角色 R∈Role 和 $\varepsil ...
- MySQL数据库用户和权限管理
一.视图 视图:VIEW,虚表,保存有实表的查询结果,在视图插入的内容都会存入表中.创建方法: CREATE VIEW view_name [(column_list)] AS select_st ...
- linux基础6-bash shell编程
1. type [-ta] name 一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.1.判断一个名字当前是否是alias.keyword.functio ...
- 【Flask+Redis】 python学习第一章 - 7.0 断言 数据库测试 redis学习
assert 断言 def div(num1, num2): # 断言 assert isinstance(num1, int), "值类型错误" assert isinstanc ...
- Ubuntu系统---开机总会显示错误报告处理
Ubuntu系统---开机总会显示错误报告处理 使用ubuntu16.04,开机总会显示错误报告,略烦人,查找方法关闭.一.临时关闭sudo service apport stop(重启后失效) 二. ...