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

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. C# 并发队列ConcurrentQueue

    测试函数 static async Task RunProgram() { var taskQueue = new ConcurrentQueue<CustomTask>(); var c ...

  2. 快速沃尔什变换 FWT 学习笔记【多项式】

    〇.前言 之前看到异或就担心是 FWT,然后才开始想别的. 这次学了 FWT 以后,以后判断应该就很快了吧? 参考资料 FWT 详解 知识点 by neither_nor 集训队论文 2015 集合幂 ...

  3. 【Three.js】实现随心所欲的展示外部三维模型

    1.概要 最近学习Three.js,尝试加载一些3d max导出的obj.stl模型,在展示模型的时候遇到了一些问题,模型的尺寸.位置和旋转角度每次都靠手工调整,非常的不方便,就想着写一个方法来随心所 ...

  4. kubernetes pod termination pending

    在将k8s从1.7.9 升级到1.10.2 之后,发现删除pod一直处于terminating状态, 调查发现删不掉的pod都有一个特点就是pod yaml中command部分写错了,如下所示: ap ...

  5. C# .net 使用正则表达式去掉字符串中的数字

    /// <summary>/// 去掉字符串中的数字/// </summary>/// <param name="key"></param ...

  6. javascript006_Object_模拟java的Map

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. git 学习之分支

    在一开始学习 git 的时候我们经常提到一个东西---- master.那么 master 到底是什么呢?其实它就是一个分支,一般这个分支就是主分支.而在一般 git 中都有一个指向当前你工作的分支 ...

  8. WPF DataTemplate與ControlTemplate

    一. 前言     什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore ...

  9. minStack实现

    设计包含 min 函数的栈(栈)定义栈的数据结构,要求添加一个 min 函数,能够得到栈的最小元素.要求函数 min.push 以及 pop 的时间复杂度都是 O(1). #include <a ...

  10. Golang真言

    Don't communicate by sharing memory, share memory by communicating. Concurrency is not parallelism. ...