• 只显示一行文字,便溢出隐藏

  text-overflow: ellipsis;

  white-place: nowrap;

  overflow: hidden;

  • 显示 n 行文字后便溢出隐藏

   display: -webkit-box;

  -webkit-line-clamp: n;

  -webkit-box-orient: vertical;

  overflow: hidden;

  • 强制断句(设置宽度)

  word-wrap: break-word;  // 会首先起一个新行来放置长单词(新句),新的行还是放不下这个长单词进行强制断句

  word-break: break-all;  // 不会把长单词(新句)放置到新的一行来,当这一行放不下这个长单词时会直接进行强制断句

  • 强制断句(不设宽度)

  word-wrap: break-word;

  word-break: break-all;

  width: 100%;

css文字溢出隐藏,及强制断句的更多相关文章

  1. css 文字溢出隐藏 带省略号

    .demo{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 注意宽度要设置

  2. CSS文字溢出部分自动用"..."代替

    CSS文字溢出部分自动用"..."代替 如html部分: <h4><马尔代夫双鱼岛Olhuveli4 晚6 日自助游></h4> <p&g ...

  3. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  4. CSS文字溢出处理问题

    单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...

  5. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  7. 小程序 css 文字溢出,长度过长用 。。。

    word-break: break-all;/*允许在单词内换行*/ text-align: left; /* line-height: 45rpx; */ text-overflow: -o-ell ...

  8. CSS控制Span强制换行、溢出隐藏

    CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

  9. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

随机推荐

  1. 大数据学习记录之ssh绵密登录

    1,在服务器端 ssh-keygen 2,使用ssh-copy-id 192.168.2.146 3,再测试一下ssh 192.168.2.146 exit 退出当前登录 具体流程为:A,B两台机器 ...

  2. linux下的权限控制

    终于还是要弄服务器了,这是多年前用fedora的时候整理的,也贴出来,顺便也再复习一下. 先来了解一下文件属性,在shell环境里输入:ls -l 可以查看当前目录文件.如:drwxr-xr-x. 1 ...

  3. 【转】flash air中读取本地文件的三种方法

    actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) var stream:FileStre ...

  4. es6编写reactjs事件处理函数绑定this三种方式

    第一种:官方推荐的: class LoginControl extends React.Component { constructor(props) { super(props); this.hand ...

  5. BitMap 算法

    什么是 BigMap 算法 所谓 BitMap 就是用一个 bit 位来标记某个元素对应的 value,而 key 即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间. 算法思 ...

  6. 1133: 零起点学算法40——多组测试数据(a+b)II

    1133: 零起点学算法40--多组测试数据(a+b)II Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitte ...

  7. AngularJS1.X学习笔记14-动画(解读文档)

    最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...

  8. hadoop、Storm该选哪一个

    如果hadoop.Storm还感觉混要,那么此篇文章将帮助你把他们完全区分 可以带着下面问题来阅读本文章: 1.hadoop.Storm各是什么运算 2.Storm为什么被称之为流式计算系统 3.ha ...

  9. oracle导入时提示IMP-00010:不是有效的导出文件,头部验证失败

    oracle导入时提示IMP-00010:不是有效的导出文件,头部验证失败: 原因分析:导出的oracle的版本与导入的oracle数据库的版本不一致: 可直接将dmp文件用notepad++打开修改 ...

  10. jQuery扩展函数设置所有对象只读

    jQuery(function ($) {             $.fn.disable = function () {                 return this.each(func ...