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

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. Windows10 安装 .Net 3.5 失败的解决方案

    最近因为使用一个公司内部的工具,需要安装.Net 3.5 SP1, 却发现无论如何都安装不上,无论是通过在线和离线安装包,还是通过Windows自带的feature安装功能,每次都是会提示错误0x80 ...

  2. HLS:OpenCV和RTL代码转换关系

    OpenCV 图像处理是基于存储器帧缓存而构建的, 它总是假设视频帧数据存放在外部 DDR 存储器中. 由于处理器的小容量高速缓存性能的限制, 因此, OpenCV 访问局部图像性能较差. 并且, 从 ...

  3. spring boot快速入门 7: 使用aop处理请求

    样例:登陆拦截(aop简单样例) 第一步:在pom 文件中加入aop依赖 <!-- spring aop --> <dependency> <groupId>org ...

  4. HTML5 五大特性

    一.正则表达式: 相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的patter ...

  5. java调用svnkit工具类上传本地文件到svn服务器

    package org.jenkinsci.plugins.svn.upload.step; import java.io.*; import org.tmatesoft.svn.core.SVNCo ...

  6. html5与html4区别

    1.声明方法简化,doctype.meta 2.有些元素可以省略标记,body.tbody... 3.新增语义化标签,<section><article>...<arti ...

  7. android 签名验证防止重打包

    网上资料很多,这里只做一个笔记反编译 dex 修改重新打包签名后 apk 的签名信息肯定会改变,所以可以在代码中判断签名信息是否被改变过,如果签名不一致就退出程序,以防止 apk 被重新打包. 1 j ...

  8. Office 的下载、安装和激活（图文详细）

    不多说,直接上干货! 在这里,推荐一个很好的网址,http://www.itellyou.cn/ 销售渠道不同,激活通道也不同.有零售版,有大客户版.零售的用零售密钥激活,一对一. SW开头或在中间有 ...

  9. javac的Resolve类解读

    方法1:isInitializer() /** An environment is an "initializer" if it is a constructor or * an ...

  10. Javac之inner与nested类

    One way declared types in Java differ from one another is whether the type is a class (which include ...