菜鸟一枚，没有大神的风骚，只有一点在练习中的心得，今天获得的知识是关于white-space属性、overflow属性还有text-overflow属性的组合使用，废话不多说浪费时间，进入今天的正题！

先上一张图：

这是一张最普通的图了，应该没人会看不懂吧？一行文本在一个div里面没有换行，到了浏览器中变成了两行，那该怎么解决？菜鸟继续！老鸟消失……

那当然是加代码了！加了white-space: nowrap;的CSS样式代码后，浏览器就显示为一行了！我对这个代码的理解是“文本不换行”。那这样显示也很丑，在加代码！

加了一个overflow: hidden;CSS样式后感觉已经达到自己要的效果了对于这个样式我是这么理解的“溢出隐藏”……但人的需求总是得不到满足，在加代码！

加了text-overflow: ellipsis;CSS样式后被隐藏的部分变成了省略号，是不是更有美感？我对这个样式的理解是"文本溢出以省略号显示"。

总结一下：对于以上3个CSS你可以选择单一的使用，也可以选择组合来使用，对于组合来讲我认为过程是这样子的，white-space: nowrap;（文本不换行 ），overflow: hidden; （超出容器隐藏 ），text-overflow: ellipsis; （隐藏后用省略号表示）。这些属性还有其它的值，有兴趣的可以百度一下~

切图让我进步！关于white-space属性的组合拳的更多相关文章

  1. 前端PS切图

    http://www.imooc.com/learn/506    慕课网地址 Tools Tools  Photoshop 快捷键 l  移动工具 V l  选取工具 M l  套索工具 L l  ...

  2. 两种ps切图方法（图层/切片）

    两种Ps切图方法 一．      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  3. Android UI 切图命名规范、标注规范及单位描述（转载）

    本文转自:https://blog.csdn.net/klxh2009/article/details/74938009 很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的. ...

  4. vue基于video.js实现视频播放暂停---切图网

    切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...

  5. 教你用canvas打造一个炫酷的碎片切图效果

    前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...

  6. 关于png、jpg、gif切图时的使用感悟

    关于png.jpg.gif切图时的使用感悟 曾经切图时都是一股脑所有图全切成jpg格式,最近突然心血来潮简单的研究了下其他图片格式的具体属性,才突然发现走了不少弯路,并没有做到使图片用最小体积展现出最 ...

  7. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  8. iOS - 如何切图适配各种机型

    关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...

  9. 切图时图片的选择：JPG、PNG、GIF的区别

    目前网站图片的采用一共有流行三种,分别是JPG.PNG.GIF,然而很多人并不知道三者在选择的时候究竟应该选谁.虽然都可以存储图片,但是如果要发布到网上,就必须考虑速度.大小和失真程度的问题.如果你运 ...

随机推荐

  1. kuangbin专题十六 KMP&&扩展KMP HDU3347 String Problem(最小最大表示法+kmp)

    Give you a string with length N, you can generate N strings by left shifts. For example let consider ...

  2. LOJ2565 SDOI2018 旧试题 莫比乌斯反演、三元环计数

    传送门 这道题的思路似乎可以给很多同时枚举三个量的反演题目提供一个很好的启发-- 首先有结论:\(d(ijk) = \sum\limits_{x|i}\sum\limits_{y|j}\sum\lim ...

  3. HashMap的容量大小增长原理（JDK1.6/1.7/1.8）

    . 前言 HashMap的容量大小会根据其存储数据的数量多少而自动扩充,即当HashMap存储数据的数量到达一个阈值(threshold)时,再往里面增加数据,便可能会扩充HashMap的容量. 可能 ...

  4. phpsotrm 设置命名空间

    PHPStorm 添加支持 PSR-4 命名空间前缀设置 许久没有更新博客啦, 太忙了, 七月这最后一天来写点自己在使用 PHPStorm 上的小却很有用的功能吧. PHPStorm 默认是使用 PS ...

  5. C# 添加vertical 属性上下边框消失问题

    点击这里的曲别针就好了.... 自定义控件主题..... #学习地址: http://www.cnblogs.com/anding/p/4993655.html

  6. 机器学习--最邻近规则分类KNN算法

    理论学习: 3. 算法详述        3.1 步骤:      为了判断未知实例的类别,以所有已知类别的实例作为参照      选择参数K      计算未知实例与所有已知实例的距离      选 ...

  7. npm install 安装包报错

    D:\hapi_learn>npm .x.x npm ERR! code ENOSELF npm ERR! Refusing to install package with name " ...

  8. 华东交通大学2015年ACM“双基”程序设计竞赛1003

    Problem C Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Sub ...

  9. Vue全家桶了解一下（待补充）

    vue全家桶了解一下 一.vue+vue-router+vuex+axios1.vue:使用vue-cli,生成最基本的vue项目2.vue-router:vue项目中的路由管理插件3.vuex:vu ...

  10. zabbix 安装使用

    zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...