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

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. 图像的上采样（upsampling）与下采样（subsampled）

    缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1.使得图像符合显示区域的大小:2.生成对应图像的缩略图. 放大图像(或称为上采样(upsampli ...

  2. Dijkstra+优先队列 堆优化

    关于堆优化 传统\(Dijkstra\),在选取中转站时,是遍历取当前最小距离节点,但是我们其实可以利用小根堆(STL的priority_queue)优化这个过程,从而大大降低复杂(\(O(V2+E) ...

  3. [ZJOI2019]语言[树链的并、线段树合并]

    题意 题目链接 分析 考虑枚举每个点的答案,最后除以 2 即可. 可以与 \(u\) 构成合法点对 的集合 为所有经过了 \(u\) 的链的并.因为这些链两两有交,根据结论 "树上两条相交的 ...

  4. OAuth2.0认证和授权以及单点登录

    https://www.cnblogs.com/shizhiyi/p/7754721.html OAuth2.0认证和授权机制讲解 2017-10-30 15:33 by shizhiyi, 2273 ...

  5. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  6. 完全国人自主研发原创的智能软件路由器BDS即将发布，附带企业服务总线ESB功能

    完全国人自主研发原创的智能软件路由器即将发布: 完全国人自主研发原创的智能软件路由器BDS即将发布,附带企业服务总线ESB功能 智能软件路由器 BDS 简要介绍 http://kan.weibo.co ...

  7. mongoDb数据库可视化工具 --- Robo

    工具下载: https://robomongo.org/download 最终效果: 即我们可以直接看到链接到 27017端口 的数据的所有数据,并且可以对其进行行之有效的增删查改. 注意,在下载软件 ...

  8. GitLab 项目创建后地址由Localhost改为实际IP的方法

    进入终端修改以下文件即可. vim /opt/gitlab/embedded/service/gitlab-rails/config/gitlab.yml ## GitLab settings git ...

  9. Spring Security OAuth 2开发者指南译

    Spring Security OAuth 2开发者指南译 介绍 这是用户指南的支持OAuth 2.0.对于OAuth 1.0,一切都是不同的,所以看到它的用户指南. 本用户指南分为两部分,第一部分为 ...

  10. MYSQL 缓存

    在PHP.INI中query_cache_type设置为1. 即 开始MYSQL全局SQL语句 都缓存.(0 不使用) 临时关闭查询缓冲的方法:1.    SELECT SQL_NO_CACHE fi ...