css超出部分显示省略号
单行文本 <!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超出部分显示省略号的更多相关文章
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- css超出隐藏显示省略号怎么设置？
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
- CSS超出部分显示省略号…代码
让DIV,LI等元素超出部分文字用省略号…显示. 示例: 兼容IE/Firefox/Chrome 代码: display:block;white-space:nowrap; overflow:hidd ...
- css 超出部分显示省略号 汇总
单行: 加宽度 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行: display: -webkit-box; -we ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本强制两行超出就显示省略号,不显示省略号
1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...
- Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
随机推荐
- Download Software Top 10
We are quite rich in terms of web browsers! Nevertheless, it's a bit surprising to know that even so ...
- RxJava系列之中的一个 初识Rxjava
1.简单介绍 基础知识 响应式代码的基本组成部分是Observables和Subscribers(事实上Observer才是最小的构建块,但实践中使用最多的是Subscriber.由于Subscrib ...
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1)：格式化数字字符串 小程序开发之图片转Base64（C#、.Net） jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
Visual Studio 2017中使用正则修改部分内容 最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...
- Android自带的分享功能案例
MainActivity的代码 package com.hpsvse.weiboshare; import java.io.File; import android.net.Uri; import a ...
- java纯数字加密解密实例
我们都知道,在用户加入信息时,一些比較敏感的信息,如身份证号,手机号,用户的登录password等信息,是不能直接明文存进数据库的.今天我们就以一个详细的样例来说明一下纯数字的java加密解密技术. ...
- Visual Studio Code 常用插件
这里记录在Visual Studio Code中,我经常用到的插件. C#这个就不必说了,想用VIsual Studio Code调试和编辑C#代码,必须要装这个插件.东西还好,就是每次安装和更新插件 ...
- 【ios系列】-数据储存
第一:plist属性列表 适用对象:仅仅是Foundation框架自带的一些类比如:NString\NSarry\NSDictionary\NSset\NSnumber\NSdata 使用: 1:调用 ...
- 关于axis2.1.6与websphere7的包冲突问题的解决方式
1,复制axis2.1.6内的module目录内的全部文件到lib 并改动扩展名为.jar 2,删除module目录(可选,不删除也能够) 3,部署到was 4,设置was相应应用程序的类载入方案为父 ...
- unable to instantiate activity...
Activity跳转到Activity,后来由于项目需要将第二个Activity改成继承FragmentActivity,跳转报错...无法初始化Activity,找不到class云云.. 最后是将b ...
- 内部消息 微软中国云计算 内測Azure免费账号 赶紧申请 错过不再有
内部消息 微软中国云计算 顶级内測Azure免费账号 火热申请 过期不再有! 微软MSDN俱乐部 29754721, [一大波Azure免费账号来袭]Windows Azure再次开启示放免费试用账 ...