菜鸟一枚，没有大神的风骚，只有一点在练习中的心得，今天获得的知识是关于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. plsql查询结果中文乱码

    网上的教程很多,但是这里需要说明的是如果没有安装oracle客户端的情况下,该怎么修改注册表里面的oracle参数呢? 当然有些是不需要改注册表的,只需要配置环境变量就可以了,但是有的时候发现改了之后 ...

  2. iOS10 新特性-新功能，以及ReplayKit库

    iOS的10.0 本文总结了iOS的10,运行于目前推出iOS设备推出的主要开发者相关的功能. iOS版10引入了新的方法来增加您的应用程序通过帮助系统参与在适当的时候建议你的应用程序给用户.如果你在 ...

  3. 2019.2.25考试T1， 矩阵快速幂加速递推+单位根反演（容斥）

    \(\color{#0066ff}{题解}\) 然后a,b,c通过矩阵加速即可 为什么1出现偶数次3没出现的贡献是上面画绿线的部分呢? 考虑暴力统计这部分贡献,答案为\(\begin{aligned} ...

  4. luogu4449 于神之怒加强版(莫比乌斯反演)

    link 给定n,m,k,计算\(\sum_{i=1}^n\sum_{j=1}^m\gcd(i,j)^k\)对1000000007取模的结果 多组数据,T<=2000,1<=N,M,K&l ...

  5. Navicat12破解

    Navicat12破解 http://www.sdbeta.com/xiazai/2017/0818/209765.html

  6. js 的 一些操作。。。

    // 对错误图片进行处理 $("img").error(function() { $(this).attr("src", "http://127.0. ...

  7. CodeForces - 359C-Prime Number

    Simon has a prime number x and an array of non-negative integers a1, a2, ..., an. Simon loves fracti ...

  8. python 分页 封装

    分页 封装 我是在项目根目录创建个分页文件 分页代码: class Pagination(object): def __init__(self, data_num, current_page, url ...

  9. codeforces 620D Professor GukiZ and Two Arrays

    #include <bits/stdc++.h> using namespace std; + ; const long long inf = 1e18; int n, m; long l ...

  10. day14 面向对象

    . 面向对象和面向过程 .面向过程:核心是过程,是流水线 优缺点: .流程化,编写简单 .可扩展性差 .面向对象:核心是对象(对象:具有相同属性和动作的结合体) 优缺点: .可扩展行强 .复杂度高于面 ...