(1)

//在断点处换行

word-wrap: normal;

//允许在长单词进行换行

word-wrap: break-word;

(2)

white-space:怎么处理元素间的空白

white-space:nowrap 不换行

white-space:normal;默认。空白会被浏览器忽略。

white-space:pre-line;

保留空白,不换行

white-space:pre-wrap;

保留空白,换行

(3)text-overflow:ellipsis||clip||string

使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果

hover时候

text-overflow:inherit;
overflow:visible;

(4)多行文本溢出

overflow:hidden;

white-space: nowrap;

text-overflow:ellipsis;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

word-wrap,white-space和text-overflow属性的更多相关文章

  1. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  2. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  3. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  4. CSS display overflow 属性 cursor光标类型

    display属性   功能:规则网页元素如何显示的问题.   取值:none(隐藏).block(以块元素显示).inline(以行内元素显示)   block:可以实现将行内元素转成块元素.   ...

  5. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  6. overflow属性

    css属性overflow属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制. 参数是scroll时候,必会出现滚动条. 参数是auto时候,子 ...

  7. CSS overflow 属性

     值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...

  8. 转:CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  9. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  10. CSS3对于盒中容纳不下的内容的显示——overflow属性

    overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...

随机推荐

  1. centos无法载入 mcrypt 扩展,<br />请检查 PHP 配置,经过各种尝试,终于找到了解决办法

    百度了无数个方法都没有解决问题,也是折腾死我了,最终解决了问题 解决办法:安装php-mcrypt libmcrypt libmcrypt-devel这三个库文件 1.安装第三方yum源(默认yum源 ...

  2. CSS自学笔记(16):CSS3 用户界面

    CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸.轮廓等等. 新增的部分属性的浏览器支持情况 属性 浏览器支持 resize IE Firefox Chrome Safa ...

  3. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  4. N个数依次入栈,出栈顺序有多少种

    题目:N个数依次入栈,出栈顺序有多少种? 首先介绍一下卡特兰数:卡特兰数前几项为 : 1, 1, 2, 5, 14, 42, 132, 429, 1430, 4862, 16796, 58786, 2 ...

  5. Codeforces 235E

    Codeforces 235E 原题 题目描述:设\(d(n)\)表示\(n\)的因子个数, 给定\(a, b, c\), 求: \[\sum_{i=1}^{a} \sum_{j=1}^{b} \su ...

  6. [Leetcode][Python]19: Remove Nth Node From End of List

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 38: Count and Sayhttps://oj.leetcode.co ...

  7. PHP自学3——在html的<table>标签中显示用户提交表单

    为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...

  8. globalCompositeOperation 学习

    globalCompositeOperation globalCompositeOperation即Canvas中的合成操作. 1.source-over 这是默认值,他表示绘制的图形将画在现有画布之 ...

  9. CRM后期修改实体,新增货币类型字段 需要注意的问题

    货币类型字段新增 需要处理历史数据 否则编辑会报错 提示如果货币字段中存在值,则需要指定币种,请选择币种,然后重试 编辑时货币字段不显示¥符号.新增正常.第一次编辑提示错误保存后再编辑也正常.不是JS ...

  10. mac nodejs&npm 安装

    https://www.baidu.com/link?url=Ekv7EzWuMOXjIqFL_ewddWzdahU7jMAsWY4gOGOjMtC&ie=UTF-8&wd=nodej ...