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

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. 2019.4.24 3D效果滚筒导航练习

    效果图: 彩千圣天下第一!(小声bb) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  2. redis 远程 访问 安全配置

    朋友总结很好,就转载了-> 站长博客 假设两台redis服务器,ip分别为:192.168.1.101和192.168.1.103,如果在101上通过redis-cli访问103上的redis呢 ...

  3. 【html5】cookie、sessionStorage、localStorage

    第四条补充:      cookie中包含domain和path,所有向该域下该路径发送的请求头部都会包含这个cookie:      session浏览器关闭后消失,只能由最初给对象存储数据的页面访 ...

  4. Wireshark命令行工具tshark详解(含例子)-01

    Wireshark命令行工具tshark使用小记 1.目的 写这篇博客的目的主要是为了方便查阅,使用wireshark可以分析数据包,可以通过编辑过滤表达式来达到对数据的分析:但我的需求是,怎么样把D ...

  5. Veloce2 Emulator

    High capacity, high-speed, multi-application powerhouse for simulation and emulation of SoC designs ...

  6. iOS 真机测试错误“The application could not be verified”

    iOS 真机测试错误"The application could not be verified" 真机测试的时候报错:"The application could no ...

  7. oracle 树状结构递归 PL/SQL输出控制 包括空格输出控制

    树状结构 存储过程中通过递归构建,类似BBS回帖显示,代码共三段: 建表,插入数据,创建存储过程显示: 1.create table article(id number primary key,con ...

  8. Python Qt的窗体开发的基本操作

    本文章采用的是Qt4,是python(x,y) 套件中集成的,为啥不集成Qt5呢,懒得装啊:) 正文: 首先看成品: 这个程序的功能是输入原价和降价的百分比,计算出最后的价格. 设计器部分 然后就是开 ...

  9. ExtJs定时消息提示框，类似于QQ右下角提示，ExtJs如何定时向后台发出两个请求并刷新数据实例

    原文出自:https://blog.csdn.net/seesun2012 思路: 1.加载页面,加载Ext.TaskManager.start()方法: 2.执行定时器方法: 3.获取地址向后台发送 ...

  10. CentOS虚拟机不能联网状况下yum方式从本地安装软件包

    大家都知道yum是linux下一个非常好用的软件安装/卸载软件,它方便操作,而且最厉害的是可以解决令人头疼的包依赖关系.但是若是你的linux不能联网,若想使用yum安装软件,可以依照下面的方法. 1 ...