一、单行文本显示省略号......

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

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <style type="text/css">

        /* 一般要指定宽度，然后给如下四个属性。 */

        span{

            width:200px;

            display:block;

            overflow:hidden;

            white-space:nowrap;

            text-overflow:ellipsis;

        }

    </style>

</head>

<body>

    <span>我是单行文字省略我是单行文字省略</span>

</body>

</html>

二、多行文本显示省略号......

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <style type="text/css">

        /* 一般要指定宽度，然后给如下四个属性。 */

        p {

            width: 200px;

            overflow : hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

        }

    </style>

</head>

<body>

    <p>我是多行文字省略我是多行文字省略我是多行文字省略行文字省略行文字省略行文字省略</p>

</body>

</html>

css 之单行文本显示省略和多行文本省略的更多相关文章

  1. css控制单行文本溢出

    1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidd ...

  2. css截断长文本显示

    实现 截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO. 而通过前端css的截断,则灵活多变,可统一运用与整个网站. 这项技术主要运用了text-overflow属性,这 ...

  3. 24Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、Switch

    一.Flutter常用表单介绍: CheckboxListTile.RadioListTile.SwitchListTile.Slide. 二.TextField:表单常见属性: maxLines:设 ...

  4. CSS实现单行文本溢出显示省略号

    p { width:100px;//设定宽度 //以下三个属性设置均必不可少 white-space: nowrap; text-overflow:ellipsis; overflow:hidden; ...

  5. css text-overflow溢出文本显示省略号

    <div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...

  6. css限制单行文本输入，超出部分使用...替换

    在实际应用中,经常需要只显示一行文字,不允许文字换行破坏整体样式的情况.例如'商品的名称','简介'等等.但是由于显示器的宽度不一样,会出现后台所给文字内容,一行文本容纳不下的情况.溢出的文本如果使用 ...

  7. css实现单行（多行）文本溢出显示 ...

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...

  8. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  9. css单行文本及多行文本溢出显示省略号

    关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...

随机推荐

  1. [转] Ansible 内置变量参考

    Quick reference for Ansible variables [From] https://github.com/lorin/ansible-quickref

  2. Basic Calculator - Stack（表达式计算器）

    978. Basic Calculator https://www.lintcode.com/problem/basic-calculator/description public class Sol ...

  3. linux安装使用xdebug

    我还是来给大家一个正确的配方,每个人的php版本不一样 所以下载的xdebug应该是不一样的 1,https://xdebug.org/wizard.php   进入这个网页 把自己phpinfo的信 ...

  4. Pycharm的配置和使用

    pycharm pycharm是一个比较好的python IDE,可以在MACOS和windows上使用,补全功能强大,而且界面十分友好,特别适合python编程人员使用. pycharm Pycha ...

  5. 使用Java Servlet进行简单登录

    效果图 登录页面代码:login.html <%@ page language="java" contentType="text/html; charset=UTF ...

  6. 用maven来创建scala和java项目代码环境（图文详解）（Intellij IDEA（Ultimate版本）、Intellij IDEA（Community版本）和Scala IDEA for Eclipse皆适用）（博主推荐）

    不多说,直接上干货! 为什么要写这篇博客? 首先,对于spark项目,强烈建议搭建,用Intellij IDEA(Ultimate版本),如果你还有另所爱好尝试Scala IDEA for Eclip ...

  7. 查找checked的checkbox和raido

    <fieldset id="checkArray"> <input type="checkbox" name="chk[]" ...

  8. C++实现顺序查找，折半查找，插值查找

    1.顺序查找 从数组起始扫描到数组结尾,判断该索引数组是否和关键字相等,成功返回1 代码如下: //顺序查找 int seqSearch(int *array, int low, int high, ...

  9. TLD（Tracking-Learning-Detection）一种目标跟踪算法

    原文:http://blog.csdn.net/mysniper11/article/details/8726649 视频介绍网址:http://www.cvchina.info/2011/04/05 ...

  10. HA_Ship Transcation Log 事务日志传送

    环境准备: 虚拟机3台,INTER-DC, INTER-SQLA, INTER-SQLB 创建域帐户 INTER\MSSQLSERVER.SERVICE,INTER\AGENT.SERVICE,分别添 ...