white-space MSD定义为： 是用来设置如何处理元素中的空白

其使用场景有很多，比如：横向滑动，超出显示省略号，输出空格显示空格等

1.横向滑动　

在写手机页面的过程中，我想大部分人都遇到横向滑动的问题，今天我们就来讨论一下横向滑动，其css核心为：white-space、

　　１.首先定义一个父容器宽度，

　　 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 标签 使用的更多相关文章

  1. 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=\ ...

  2. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  3. Java去除掉HTML里面所有标签的两种方法——开源jar包和自己写正则表达式

    Java去除掉HTML里面所有标签,主要就两种,要么用开源的jar处理,要么就自己写正则表达式.自己写的话,可能处理不全一些自定义的标签.企业应用基本都是能找开源就找开源,实在不行才自己写…… 1,开 ...

  4. HTML5快速入门（三）—— 标签综合运用

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  5. source insight 保存时删除多余空格，去除多余空格 space tab键

    source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...

  6. source insight 保存时删除多余空格，去除多余空格 space tab键【转】

    转自:http://blog.csdn.net/lanmanck/article/details/8638391 上传源码时最好把空格行去掉,以前介绍了使用notepad++,现在发现,习惯用sour ...

  7. Engineer in the White Spaces

     Engineer in the White Spaces Michael Nygard A SySTEM ConSiSTS oF inTERdEpEndEnT pRogRAMS. We call ...

  8. Java开发笔记（一百二十七）Swing的标签

    提起AWT的标签控件Label,那个使用体验可真叫糟糕,不但不支持文字换行,而且对中文很不友好,既可能把中文显示为乱码,还不支持博大精深的各种中文字体.所幸Swing的升级版标签JLabel在各方面都 ...

  9. c#文件操作

    1.创建文件夹 //using System.IO; Directory.CreateDirectory(%%1);   2.创建文件 //using System.IO; File.Create(% ...

  10. jQuery-template.js学习

    花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.e ...

随机推荐

  1. 日语单词N3_N4_N5

    单 词 讲 解 あ行单词 ああ:0[副]那样.那种 例句:ああ言うことはしないほうがいい.那样的事情最好不做. 電車の窓からごみを棄てているああ言うことはしないほうがいい. 挨拶(あいさつ):① 寒暄 ...

  2. UIApplicationDelegate里面最常用的几个函数执行顺序小结

    (1)点击桌面图标正常启动App或者杀死进程后点击推送消息启动App 1.application:willFinishLaunchingWithOptions 2.application:applic ...

  3. Ubuntu 系统信息相关命令

    系统信息相关命令 本节内容主要是为了方便通过远程终端维护服务器时,查看服务器上当前 系统日期和时间 / 磁盘空间占用情况 / 程序执行情况 本小结学习的终端命令基本都是查询命令,通过这些命令对系统资源 ...

  4. 配置由Spring处理json乱码

    <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> < ...

  5. Java 基础 enum枚举类 的创建/使用/接口继承 ,以及手动创建枚举类的对象为:public static final

    笔记: import java.lang.*; /**一:枚举类 : enum Season implements info { s1(),s2(),s3(),s4() }; //s1--s4 放在S ...

  6. 关键字final 修饰类、方法、属性、参数类型

    笔记: /** 关键字final(最终的) 标记的类不能被继承, 提高安全性,提高程序的可读性 * 1.final 修饰类,这个类就不能被继承: 如:String类.StringBuffer类.Sys ...

  7. ggplot2入门与进阶（上）

    出处:http://www.cellyse.com/how_to_use_gggplot2_part1/ ggplot2包是基于Wilkinson在<Grammar of Graphics> ...

  8. FFmpeg常用命令学习笔记（六）图片与视频互转命令

    图片与视频互转命令 1.视频转图片 ffmpeg -i in.mp4 -r 1 -f image2 img-%3d.jpeg -r 1:转换图片帧率为1,也就是1秒转1张.-f image2:将媒体文 ...

  9. SqlHelper发布—比Pagehelper更好用的分页插件

    SqlHelper发布-比PageHelper性能更高 起源 前段时间开启了一个新的项目,在选择分页插件时,发现github上很流行的一个是pagehelper,在百度上搜索了一下,使用量.由于项目紧 ...

  10. BZOJ 5495: [2019省队联测]异或粽子 (trie树)

    这题果然是原题[BZOJ 3689 异或之].看了BZOJ原题题解,发现自己sb了,直接每个位置维护一个值保存找到了以这个位置为右端点的第几大,初始全部都是1,把每个位置作为右端点能够异或出来的最大值 ...