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

  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. AOP学习笔记一

    软件开发的目的是为了解决各种需求,包括业务需求和系统需求.目前,业界通过使用面向对象的编程思想,已经可以对业务需求等普通关注点进行很好的抽象与封装,并且使之模块化.但是对于系统需求一类的关注点来说,情 ...

  2. .NET遇上Docker - 使用Docker Compose组织Ngnix和.NETCore运行

    本文工具准备: Docker for Windows Visual Studio 2015 与 Visual Studio Tools for Docker 或 Visual Studio 2017 ...

  3. HTML5新特性-多线程(Worker SharedWorker)

    There is no doubt that JavaScript是没有多线程之说的,他只能一件事一件事的做,做完一件事再做下一件事,假如你的js要花一段比较长的时间做一件事的话,那么浏览器将会卡顿一 ...

  4. 如何使用第三方webservice

    webservice地址后加wdls 生成后把文件名改为wdsl 调用方式: 1.添加webservice引用: 2.生成代理类的方法(本人比较喜欢用这种方式): 使用cmd命令行: a.通过webs ...

  5. 使用NPOI生成Excel级联列表

    目录 1    概要    1 2    磨刀不误砍柴工——先学会Excel中的操作    2 3    利用NPOI生成导入模板    7 3.1    设置workbook&sheet   ...

  6. stm32之USART学习

    首先,我是看着这位博主的文章受到的启发,进而加深了自己对USART的理解.下面是自己改装并实验过的程序. 原文:http://www.cnblogs.com/greatwgb/archive/2011 ...

  7. POJ 1741/1987 树的点分治

    树的点分治,主要思想是每次找子树的重心,计算经过根节点的情况数,再减去点对属于同一子树的情况. #include <iostream> #include <vector> #i ...

  8. CSS3 制作网格动画效果

    在线演示      源码下载

  9. Linux Shell——流程控制

    1. 创建交互式脚本 使用 echo命令的选项 关于各种命令的使用,可以使用man 命令来查看命令的详细用法介绍.例如,我想看下 echo 的用法和各种选项.可以执行 man echo.执行结果如下: ...

  10. httpd: Could not reliably determine the server's fully qualified domain name

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 问题描述: AH00558: httpd: Could not reliab ...