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. C#基础--AbStract与Interface

         Interface: 接口方法不能用public abstract等修饰.接口内不能有字段变量,构造函数. 接口内可以定义属性,如string color{get;set;}这种. 实现接口 ...

  2. [转载]JDK、SDK、J2EE、J2SE、J2ME的区别

    [转载]JDK.SDK.J2EE.J2SE.J2ME的区别 来源: https://www.cnblogs.com/liangyihui/p/5905875.html Java的名词真的是多啊 JDK ...

  3. vscode 基本知识以及如何配置 C++ 环境

    参考: 在用VSCode? 看完这篇文章, 开发效率翻倍!最后一条厉害了~ Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文 按下 ctrl+K,再按下 ...

  4. 二级菜单被banner遮住的解决方法

    原因:z-index的问题 解决:在导航box加  position: relative; z-index: 4; 比banner 大就可以.然后在一级导航的 li 设置 相对定位   positio ...

  5. 使用nodejs连接mysql数据库实现增删改查

      首先要有数据库 使用xampp 或者 phpstudy 可以傻瓜式安装 新建一个项目文件夹 之后在这个目录下初始化package.json (npm init) 先在项目中安装mysql 和 ex ...

  6. [Vuex系列] - Actions的理解之我见

    Actions如何定义的 恕小端不才,对Action的总结如下: Action 可以提交mutation方法,通过mutation来改变state Action 函数可以接收一个context对象,通 ...

  7. maccms代码审计

    由于工作原因,分析了很多的cms也都写过文章,不过觉得好像没什么骚操作都是网上的基本操作,所以也就没发表在网站上,都保存在本地.最近突然发现自己博客中实战的东西太少了,决定将以前写的一些文章搬过来,由 ...

  8. FlowPortal BPM流程中调用封装好的API如何调试

    遇到复杂一点的业务,我们常常都会将业务逻辑封装到一个dll中,在流程中调用封装好的API. 业务逻辑库封装到企业库后,是可以在Visual Studio中调试库的哦. [附加到进程] [流程中调用AP ...

  9. js获取URL请求参数与改变src

    js实现: <script> function GetQueryString(name) { var reg = new RegExp("(^|&)" + na ...

  10. UITableView个人使用总结【前篇-增量加载】

    UITableView现在边整边总结. 预计分两个部分,第一个部分主要是对UITableView本身属性的学习.第二个部分可能会是加上一个编辑按钮以及对列表的操作. 今天先学习第一部分. 第一部分,我 ...