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. CentOS 系统下使用 yum 安装 Redis

    本文主要介绍在 CentOS 7 系统下使用 yum 安装 Redis 的过程. 更改 yum 源 将 Centos 的 yum 源更换为国内的阿里云源. 首先备份你的原镜像文件,保证出错后可以恢复: ...

  2. VBA比较运算符

    VBA支持的比较运算符如下所示. 假设变量A=10,变量B=20,则 - 运算符 描述 示例 = 检查两个操作数的值是否相等.如果是,那么条件是真. (A = B)结果为:False <> ...

  3. docker系列五之数据卷(volumn)

    docker数据卷(volumn) 一. 为什么需要数据卷 docker镜像是由多个文件系统(只读层)叠加而成,当我们启动一个容器的时候,docker的服务端会加载镜像的只读层,并在最顶层创建一个可读 ...

  4. vue-cli搭建vue项目环境

    该篇文章是继https://www.cnblogs.com/qing-5/p/11321585.html来写 1.打开终端,输入指令"npm install --global vue-cli ...

  5. FPGA上外挂DDR2&DDR3&MIG IP的使用记录

    前言 当需要大容量数据存储及处理的时候,FPGA内部自带的存储资源是远远不够的,所以问题来了,怎么使用外带的DDR3? 首要问题在于DDR3是什么?有没有协议?当然只是需要用Xilinx MIG IP ...

  6. element之 el-scrollbar组件滚动条的使用

    在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部.侧栏.面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动.

  7. js判断img是否存在

    利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的URL. <p>第一种情况:图片存在,正常显示    <img src="http ...

  8. Computer Vision_18_Image Stitching： Image Alignment and Stitching——2006

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  9. C语言字符串格式化输出

    %ms:将字符串全部输出,如果字符串长度小于m,在左边用空格将输出宽度补齐为m: %.ns:如果n大于字符串长度,将字符串全部输出,否则,输出前n个字符: %m.ns:如果n不大于m,输出指定字符串的 ...

  10. python将一个字符串写入文件中的编码问题

    python2将一个字符串写入文件中: 1.如果字符串是str类型 # -*- coding:utf-8 -*- txtFile="今天天气不错" name = "1.t ...