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的 ...
随机推荐
- centos7下cp -rf总是提示覆盖的解决办法
发现每次执行cp命令,其实是执行了cp -i命令的别名,因此无论怎么输入都提示是否覆盖. cat ~/.bashrc,有“alias cp='cp -i'”,难怪如此!!! 添加#号,#alias c ...
- webpack-Hot Module Replacement（热更新）
模块热替换(Hot Module Replacement) 模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面 ...
- iOS 获取手机 唯一标识
存贮在keychainQuery 可以统计用户使用情况 -(void)gatherMessage{ //采集用户设备信息 NSUserDefaults *userDefaults=[NSUserDef ...
- 实践部署与使用apache kafka框架技术博文资料汇总
前一篇Kafka框架设计来自英文原文(Kafka Architecture Design)的翻译及整理文章,非常有借鉴性,本文是从一个企业使用Kafka框架的角度来记录及整理的Kafka框架的技术资料 ...
- MySQL运行计划不准确 －概述
为毛 MySQL优化器的运行计划 好多时候都不准确,不是最优的呢(cpu+io)??? 因素太多了:: 存在information_schema的信息是定期刷新上去的,好多时候不是最真的,甚至相差好大 ...
- Java使用三种不同循环结构对1+2+3+...+100 求和
▷//第一种求法,使用while结构 /** * @author 9527 * @since 19/6/20 */ public class Gaosi { public static void ma ...
- linux 监控进程所消耗的资源（内存），达到阈值（绝对值、相对值）后，将其杀死
监控某个python进程是否存在,如不存在则启动 #!/bin/bashwhile [ 1 ]do #打印出当前的jboss进程:grep jboss查询的jboss进程,grep -v " ...
- How can I pass data from Flask to JavaScript in a template?
https://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-flask-to-javascript-in-a-templ ...
- Delphi的goto语法
今天第一次主要到Delphi也有goto语法,特别是其奇怪的label声明.估计主要是用来跳出多重循环,而且还真有人使用这种方式.记个笔记: procedure TForm1.btn3Click(Se ...
- ABAP 邮件
function zint_send_email.*"-------------------------------------------------------------------- ...