菜鸟一枚，没有大神的风骚，只有一点在练习中的心得，今天获得的知识是关于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. webpack热更新实现

    原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...

  2. ipad中icon与launchimage的size

    图标(AppIcon)与启动图(LaunchImage)是开发iOS应用程序必不可少的内容,但是在网络上对于这部分的内容讲解的并不详细,所以花些时间写了这篇文章,希望有需要的朋友可以随时查看 想知道A ...

  3. anularjs前端分页

    var dataList = []; $scope.page = { page:1, pageSize:15, numPerPageOpt:[15,30,50,100], totalNum:0, to ...

  4. P3941 入阵曲

    \(\color{#0066ff}{ 题目描述 }\) 小 F 很喜欢数学,但是到了高中以后数学总是考不好. 有一天,他在数学课上发起了呆:他想起了过去的一年.一年前,当他初识算法竞赛的 时候,觉得整 ...

  5. luogu2948 滑雪课

    题解里面全是dp的大神本蒟蒻瑟瑟发抖奉上一篇记忆化搜索... 其实嘛,记忆化搜索还是很安全透彻清真人品的,一般递推不好实现dp可以用记忆化搜索 然后本题先预处理一个mint[i]代表当前能力值为i,参 ...

  6. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  7. springboot整合dubbo注解方式

    工程结构: 主pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  8. C语言变量：名称、地址和值

    变量的名称.地址和变量的值之间关系密切. 我们可以认为变量有两个属性:名称和值(其他属性暂不讨论): 计算机编译和加载后也认为变量有两个属性:地址和值.地址就是变量在计算机内部的名称. 许多语言中地址 ...

  9. P4345 [SHOI2015]超能粒子炮·改

    传送门 看到数据和模数大小就知道要上 lucas 了 然后开始愉快地推公式: 答案为 $\sum _{i=0}^kC_{n}^{i}\ (mod\ 2333)$ 设 $f [ i ] [ j ] = ...

  10. APP微信支付实现

    参考官方文档 设计到的API: 统一下单API.支付结果通知API和查询订单API 下面代码是请求预支付ID // 构建下单bean final WxPayUnifiedOrderBean unifi ...