菜鸟一枚，没有大神的风骚，只有一点在练习中的心得，今天获得的知识是关于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. CI框架源码学习笔记2——Common.php

    上一节我们最后说到了CodeIgniter.php,可是这一节的标题是Common.php,有的朋友可能会觉得很奇怪.事实上,CodeIgniter.php其实包含了ci框架启动的整个流程. 里面引入 ...

  2. (16)break和continue

    #(1)这里顺带说下pass # pass 过 的意思,防止代码报错,就是个占位的, if True: # 不允许代码块里面的内容为空,用pass占位 pass #(2)break (只能用在循环当中 ...

  3. $.ajax 错误信息

    $.extend({ getHtml:function(url,callback){ $.ajax({ dataType:"html", url:url, timeout:1500 ...

  4. Report Server运行后一直处于加载状态

    描述:对Report server做了一个小练习,算是入门,但发现运行起来后,页面一直处于加载状态,不知为何? 解决:查了一下网上的资料,解决的方法是 protected void Page_Load ...

  5. day18 约束 异常

    1. 类的约束 方案一:抛出异常,子类必须重写父类方法,否则会报错 class Base: def login(self): #强制xxx做XXX事 raise NotImplementedError ...

  6. 阿里Java开发规约（1）

    本文是对阿里插件中规约的详细解释一,关于插件使用,请参考这里 1. ArrayList的subList结果不可强转成ArrayList,否则会抛出ClassCastException异常. 说明:禁止 ...

  7. 两个数据库通过DataTable实现差异传输

    两个主要方法 /// <summary>/// 用途:/// 用源表和目标表比较,返回差异的数据(目标表为参照物)/// /// 逻辑:/// 1.合并两个表/// 2.循环合并后得到的表 ...

  8. Day04 流程控制 while 和for循环

    一.流程控制 if 判断 python中使用缩进来区分代码块的 语法 一: #python if 条件: 代码块1 代码块2 自上而下依次运行 语法二: # python if 条件一: 代码一 el ...

  9. 6-----BBS论坛

    BBS论坛(六) 6.1.优化json数据的返回 (1)新建utils/restful.py # utils/restful.py from flask import jsonify class Ht ...

  10. Microsoft使用技巧

    1.拍摄屏幕内容的截图 按 Win + Shift + S 以打开截图栏,然后将光标拖动到要捕获的区域. 截图区域将保存到剪贴板. 2.使用键盘添加表情符号 随心随处表达自我. 按 Ctrl + Sh ...