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. HTTP协议 学习

    HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程.客户端连上web服 ...

  2. django 2.0 xadmin 错误集锦

    转载 django 2.0 xadmin 错误集锦 2018-03-26 10:39:18 Snail0Li 阅读数 5188更多 分类专栏: python   1.django2.0把from dj ...

  3. js入门之函数

    一. 函数 函数可以封装一段特定功能的代码,然后通过函数名可以重复调用 1 .函数的定义 funcation 函数名 (){ 函数体 } 函数名() 调用函数 2. 函数的参数 funcation f ...

  4. TreeMap核心源码实现解析

    TreeMap实现了SotredMap接口,它是有序的集合.而且是一个红黑树结构,每个key-value都作为一个红黑树的节点.如果在调用TreeMap的构造函数时没有指定比较器,则根据key执行自然 ...

  5. spring data 入门

    提出问题 我是Sping Data,是程序员的春天,因为我提供很多接口给开发人员, 减少程序员重复的写CRUD和分页等方法,你们也可以叫我春D,或者春帝,因为我很酷 解决问题 在Spring Data ...

  6. MVC方式显示数据(手动添加数据)

    Model添加类 Customers using System; using System.Collections.Generic; using System.Linq; using System.W ...

  7. MySQL学习笔记-MHA安装配置

    一.配置主从同步   1. 本例中主从ip及端口 Master:10.1.5.8:3306 Slave1:10.1.5.9:3306 (候选master) Slave2:10.1.5.195:3306 ...

  8. python-----多线程笔记

    多进程笔记: 多线程介绍: 多线程是为了同步完成多项任务,通过提高资源使用效率来提高系统的效率.线程是在同一时间需要完成多项任务的时候实现的. 最简单的比喻多线程就像火车的每一节车厢,而进程则是火车. ...

  9. 用js刷剑指offer(链表中倒数第k个结点)

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 牛客网链接 思路 设置两个指针,p,q,先让p走k-1步,然后再一起走,直到p为最后一个 时,q即为倒数第k个节点 js代码 // 空间复杂度1 ...

  10. Python自动化测试PO模式

    页面元素定位信息 页面元素定位信息文件 [leadscloud_login] input_user_name = xpath>//*[@id='main']/div/div[2]/div[2]/ ...