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. Eclipse 设置代码模板

    checkstyle插件 安装 从 http://sourceforge.jp/projects/sfnet_eclipse-cs/releases/ 下载 net.sf.eclipsecs-upda ...

  2. 嵌套的页面——自适应高度与跨越操作DOM

    <div id="myIframeId"> <iframe ref="myIframe" name="odpIframeName&q ...

  3. yml格式的在线转换工具

    工具1: https://www.toolfk.com/tool-format-yaml 工具2: https://www.toyaml.com/index.html https://www.cnbl ...

  4. Computer Vision_33_SIFT：Remote Sensing Image Registration With Modified SIFT and Enhanced Feature Matching——2017

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

  5. linux /etc/shadow文件详解

    struct spwd { char *sp_namp; /* user login name */ char *sp_pwdp; /* encrypted password */ long int ...

  6. Oracle中查询表中数据的上次更新时间

    目前找到的是以下方式,但是这种方式在表的数据量比较大的时候效率会比较慢. select to_char(scn_to_timestamp(max(ora_rowscn)),'YYYY-MM-DD HH ...

  7. 前端笔记-html

    前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...

  8. PWA

    附一个示例e6书写 todolist的示例,切换list的状态: //todolist示例 const toggleTodo = (id)=>{ setTodos(todos => tod ...

  9. DataSet,DataTable,DataView、DataRelation

    一.创建Dataset和DataTable DataSet ds = new DataSet();//DataSetName默认为"NewDataSet" DataTable ta ...

  10. 11、组件注册-使用FactoryBean注册组件

    11.组件注册-使用FactoryBean注册组件 package org.springframework.beans.factory; import org.springframework.lang ...