菜鸟一枚，没有大神的风骚，只有一点在练习中的心得，今天获得的知识是关于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. t-sql read xlsx

    How to Read and Load an Excel 2007 or Excel 2010 File Without Using Import/Export Utility To read an ...

  2. T-Sql操作Xml数据(转)

    T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...

  3. Oracle恢复表数据

    Oracle恢复数据 在oracle 10g以及之后的版本,提供了回收站的机制,为了防止误操作将表数据清空而有回收机制. 换句话说,我们删除的表不会立马消失,而是进入回收站.下面我们可以查看回收站 查 ...

  4. CompressFormat压缩性能

    在产品应用场景内有个需求,Bitmap原图压缩保存.但是每次保存一个图片,需要500+ms.原本以为是sd卡写的慢.后来测试发现是图片压缩问题.试验过CompressFormat PNG和JPEG两种 ...

  5. 洛谷4316 绿豆蛙的归宿(DAG递推/概率dp)

    题目大意: 给定一个DAG,求起点到终点的路径长度期望 根据题意可以知道每一条边都有一定概率被走到 那么\(\displaystyle\begin{aligned} Ans = \sum_{e \in ...

  6. CentOS文件服务与数据管理

    CentOS文件服务与数据管理-专栏简介 本专栏内容涵盖了中高级Linux系统管理员所必须的文件服务.磁盘管理.数据管理.文件恢复等必备技能,实乃涨薪.跳槽之必备技能,且听一线运维老兵为你逐步揭开迷雾 ...

  7. Python利用百度地图api批量获取地址经纬度

    1.pip安装xlrd,xlwt,requests模块. 2.在工程目录处放置地点Excel文件. python2.7.13代码: #coding:utf-8 import xlrd import x ...

  8. windows 常用 命令

    Hyper-v管理               virtmgmt.msc 网络                         ncpa.cpl windows 远程登陆    mstsc.cpl C ...

  9. java mybatis学习一

    1.引入maven包 和 导入 sqljdbc包 <dependency> <groupId>org.apache.ibatis</groupId> <art ...

  10. yum安装zabbix故障报错

    装zabbix时报错 [root@zabbix ~]# rpm -ivh zabbix-server-mysql-2.2.3-1.el6.x86_64.rpm zabbix-web-mysql-2.2 ...