在CSS中有一个非常重要但对于初学者又非常容易忽略的属性:

  white-space:nowrap;  //文本不换行属性

这里附带说一下W3Cschool中对white-space的解释:

  white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

我要说的是其中用到最多的一个属性"nowrap",在文本中添加内容后,页面的缩放会引起文本不在同一行中显示

  那要如何解决这个问题呢?1.利用此属性便可轻松解决

              2.如果想要超出的文本以省略号的形式显示又如何操作呢?

                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space:nowrap;

            同时输入上述三行代码即可实现,注意:三行缺一不可!

  

CSS空白符处理!的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 深入理解CSS中的空白符和换行

    前面的话 CSS3新增了两个换行属性word-wrap和word-break.把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: ...

  3. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. CSS 3学习——文本效果和@font-face

    文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow ...

  6. CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  7. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  8. css揭秘--笔记(未完)

    第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: function $$(selector,context){ con ...

  9. css权威指南--笔记

    第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...

随机推荐

  1. Js里面的数组去重方法

    去掉数组里面重复的有很多种,我这里就说一种比较简单的吧. var arr=[23,33,44,33,44,66,44,55,44,4,44,33,23]; for(var i=0;i<arr.l ...

  2. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  3. TypeScript设计模式之中介者、观察者

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  4. MySQL数据库设计总结

    规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎. 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过10 ...

  5. git remote log error

    使用git pull的时候收到以下信息: error: there are still refs under 'refs/remotes/origin/xxxx'From 10.1.25.57:yyy ...

  6. 用一个jsp实现对数据库发访问

    <%@ page language="java" import="java.util.*" pageEncoding="gb2312" ...

  7. Mac本地编辑服务器代码

    windows上映射网络驱动器可以直接在本地编辑远程服务器的代码,那么在mac上怎么配置呢? 1.打开finder——前往——连接服务器——输入:smb://********(你的机器名) 2.输入服 ...

  8. GreenDao 工具类 --- 使用 Json 快速生成 Bean、表及其结构,"炒鸡"快!

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  9. 关于cursor的各种属性应用

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

  10. 使用javascript解一道关于会议日程安排的面试题

    这道面试题是从 HarrisonHao 的一篇博文中看到的:原文链接 我看到之后,感觉此题十分有趣,遂自己用 node.js 以不同的思路实现了一遍,实现中使用了 lodash 原题比较长,而且是英文 ...