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的 ...
随机推荐
- 用Visual Studio高版本号打开低版本号的project，转换时出现错误：fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
解决方法是: 在电脑里面搜索发现 C:\Program Files\Microsoft Visual Studio 10.0\VC\bin C:\Windows\winsxs\x86_netf ...
- Android开发：怎样隐藏自己的app应用
本文主要介绍怎样通过改动AndroidManifest.xml清单文件来达到隐藏自身应用的目的,不是隐藏第三方应用.为了不浪费大家时间.特此说明. 转载请注明作者xiong_it和链接:http:// ...
- IEnumerator<TItem>和IEnumerator Java 抽象类和普通类、接口的区别——看完你就顿悟了
IEnumerable 其原型至少可以说有15年历史,或者更长,它是通过 IEnumerator 来定义的,而后者中使用装箱的 object 方式来定义,也就是弱类型的.弱类型不但会有性能问题,最主要 ...
- asp.net listview 实现分页浏览效果
页面代码: <div style="margin-top:0px;">共<asp:Label ID="lb_count" runat=&quo ...
- GEO,IGSO,MEO,LEO
GEO(Geosynchronous Eearth Orbit):地球静止轨道卫星 IGSO(Inclined Geosynchronous Satellite Orbit):倾斜轨道同步卫星 地球同 ...
- Android Studio配置完毕Genymotion 看不到Genymotion图标
没有打开toolBar想要看到genymotion插件图标,AndroidStudio单击视图(view)>工具栏显示工具栏(toolbar)
- UltraEdit mac破解版
2018-01-17 增加18.00.0.19破解 去官网下载原载,先运行一次,再在终端里执行下面代码就可以破解完成! printf '\x31\xC0\xFF\xC0\xC3\x90' | dd s ...
- mybaits错误解决：There is no getter for property named 'id' in class 'java.lang.String'
在使用mybaitis传参数的时候,如果仅传入一个类型为String的参数,那么在 xml文件中应该使用_parameter 来代替参数名. 正确的写法: <span style="f ...
- VS2013文件同步插件开发
一.插件功能描述 插件监控一个xml文件,当该文档有添加新元素在保存的时候将新增的元素同步到指定的目录下. 二.模板的选择 由于该功能是跟代码编辑有关的,要监控文档的保存事件,所以要在文档打开的时候就 ...
- 腾讯API
相关文档: API列表 腾讯开放平台联调工具集 公共返回码说明 SDK下载