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

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

1.横向滑动 

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

  1.首先定义一个父容器宽度,

   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. RESTful接口开发

    package com.aaaaaa.manager.controller; import org.springframework.beans.factory.annotation.Autowired ...

  2. 关于vue.js的部分总结

    1.MVVM和MVC的区别: MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型 模型:后端传递的数据 试图:所看到的页面 视图模型:mvvm模式的核心,它是连接vie ...

  3. js循环及for-in , for-of的区别

    循环 字符串遍历:可通过for-of遍历字符串 for-in:遍历对象自身可继承可枚举属性 Object.keys():返回对象自身可枚举属性的键组成的数组 Object.getOwnProperty ...

  4. Vivado Bit文件压缩

    前言 Vivado编译生成的Bit文件太大,想要小一点该咋办呢?那么就需要给bit文件瘦身. 流程 直接在约束文件xdc中添加下述语句即可: set_property BITSTREAM.GENERA ...

  5. iOS登录及token的业务逻辑

    登录的业务逻辑 { http:是短连接. 服务器如何判断当前用户是否登录? // 1. 如果是即时通信类:长连接. // 如何保证服务器跟客户端保持长连接状态? // "心跳包" ...

  6. linux c 错误的捕获

    经常在调用linux 系统api 的时候会出现一些错误,比方说使用open() write() creat()之类的函数有些时候会返回-1,也就是调用失败,这个时候往往需要知道失败的原因.这个时候使用 ...

  7. 【vue开发】 父组件传值给子组件时 ,watch props 监听不到解决方案

    解决方案: watch:{ data:{ immediate:true, handler:function(){ } }} 示例:  

  8. WeixinJSBridge目前还能够直接使用的功能(2019)

    参考地址:http://mmlike.sinaapp.com/ 其余功能不是不能用了,而是有各种条件了. 以下列出的功能,均可直接使用,无需appid等任何东东,只要在手机微信网页环境中 发送邮件 W ...

  9. openstack安装部署——计算服务(控制节点&计算节点)前言

    1.前言Openstack计算服务通过认证服务获取认证:通过镜像服务获取镜像:通过仪表盘提供的用户界面与用户交互.镜像的存取受工程和用户的限制,配额受工程的限制(例如不同工程允许虚拟机实例数量不同). ...

  10. docker alpine wkhtmltopdf

    截止2019.08 wkhtmltopdf 还没有 alpine 的版本  如需使用  需要在 alpine 环境中编译 生成 wkhtmltopdf  (使用 apk add wkhtmltopdf ...