单行文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .contain {

            width: 300px;

            height: 28px;

            line-height: 28px;

            margin: 50px 0 0 50px;

            border: 1px solid rgb(0, 255, 128);

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

    <div class="contain">

        <span class="box">去年的五月正是我在北平吃青杏的季节，今年的五月我生活的痛苦真是有如青杏般苦涩。</span>

    </div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

       .box {

           display: -webkit-box;

           width: 200px;

           line-height: 1.5;

           margin: 50px 0 0 50px;

           border: 1px solid rgb(0, 255, 128);

           overflow: hidden;

           -webkit-box-orient: vertical;

           -webkit-line-clamp: 2;

        }

    </style>

</head>

<body>

    <div class="contain">

        <span class="box">去年的五月正是我在北平吃青杏的季节，今年的五月我生活的痛苦真是有如青杏般苦涩。</span>

    </div>

</body>

</html>

css超出部分显示省略号的更多相关文章

  1. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  2. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  3. CSS超出部分显示省略号…代码

    让DIV,LI等元素超出部分文字用省略号…显示. 示例: 兼容IE/Firefox/Chrome 代码: display:block;white-space:nowrap; overflow:hidd ...

  4. css 超出部分显示省略号 汇总

    单行: 加宽度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行: display: -webkit-box; -we ...

  5. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  6. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  7. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  8. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  9. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

随机推荐

  1. Centos 6.x 安装Nagios及WEB管理nagiosql实现windows及linux监控指南

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  2. 机器学习技法总结（五）Adaptive Boosting, AdaBoost-Stump,决策树

    上一讲主要利用不同模型计算出来的g.採用aggregation来实现更好的g.假设还没有做出来g.我们能够採用bootstrap的方法来做出一系列的"diversity"的data ...

  3. redux-thunk

    1.thunk function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next = ...

  4. Mongodb for PHP教程之入门安装

    简介: MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据 ...

  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  6. Android 封装实现各种样式对话框

    先上图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/disso ...

  7. 命令行方式下登录SqlPlus，密码含特殊字符

    全撞上了! 真难侍候!oracle 12c,想登录sql plus,结果没有图形界面,直接出来个命令行.这下好了,我这个数据库,多实例,意味着登录要指定实例:密码中含有特殊字符"@" ...

  8. 搭建集群后再namenode上查看进程发现除了三个基本进程还可能有别的进程，例如本来在子节点出现的进程出现在了主节点上

    搭建集群后再namenode上查看进程发现除了三个基本进程还可能有别的进程,例如本来在子节点出现的进程出现在了主节点上,namenode按正常来说是有三个进程的:namenode,resourcema ...

  9. C++ 函数部分（2）

    C++函数的递归调用 函数可以直接或间接地调用自身,称为递归调用.所谓直接调用自身,就是指在一个函数的函数体中出现了对自身的调用表达式,例如: void fun1(void) { //do somet ...

  10. mongodb07---用户权限

    用户管理: 注意: 添加用户后,我们再次退出并登陆,发现依然可以直接读数据库? 原因: mongodb服务器启动时, 默认不是需要认证的. 要让用户生效, 需要启动服务器时,就指定 --auth 选项 ...