CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示，可归纳为两种解决办法，一种方法是用CSS解决，另一种方法是js解决。
一、通过CSS控制显示
div内显示一行，超出部分用省略号显示
div内显示多行，超出部分用省略号显示
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style>
/* 单行文字末尾省略号显示 */
.div1{
height: 100px;
width:100px;
background:green;
text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本 string:使用给定的字符串来代表被修剪的文本*/
white-space: nowrap; /* nowrap:规定段落中的文本不进行换行 */
overflow: hidden; /*超出部分隐藏*/
}
/* 多行文字末尾省略号显示 */
.div2{
/* height: 100px; */
width:100px;
background:yellowgreen;
display: -webkit-box; /* display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 5; /* -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="div2" >
嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
</div>
</body>
</html>
运行结果：
二、通过js控制显示
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.mydiv {
width: 150px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="mydiv" id="demo">通过js操作的方法显示文字，使得末尾的文字省略号显示</div>
<script>
var myBox = document.getElementById('demo'); //直接用id获取domo对象
var mydemoHtml = myBox.innerHTML.slice(0, 20) + '......'; // slice() 方法可从已有的数组中返回选定的元素
myBox.innerHTML = mydemoHtml; // 填充到指定位置
</script>
</body>
</html>
运行结果：
CSS——div内文字的溢出部分用省略号显示的更多相关文章
- CSS div内文字显示两行，超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- 关于DIV内文字垂直居中的写法
最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...
- CSS+DIV实现文字一行内显示，并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
- 基于CSS+dIV的网页层，点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- css+div解决文字溢出控制显示字数
一.一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...
- css一div内文字居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div内文字显示两行，多出的文字用省略号显示
用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;disp ...
随机推荐
- 阿里云HBase推出全新X-Pack服务 定义HBase云服务新标准
2018年12月13日,第八届中国云计算标准和应用大会在京召开,会上阿里云HBase宣布推出全新X-Pack服务,支持SQL.时序.时空.图.全文检索能力.复杂分析,从处理到分析全栈式数据库,客户开箱 ...
- thinkphp 静态缓存
要使用静态缓存功能,需要开启HTML_CACHE_ON参数,并且使用HTML_CACHE_RULES配置参数设置静态缓存规则文件 . 大理石构件厂家 虽然也可以在应用配置文件中定义静态缓存规则,但是建 ...
- Delphi 2010下使用sqlitesimpledelphi连接SQLite数据库及中文乱码问题的解决
应女朋友的要求,要写一款销售管理的软件.用于管理服装店每天的销售记录,已及管理服装店的客户,并对客户进行生日提醒 因为之前使用C#写过一款家庭管理软件,主要是自己用,所以使用了服务器型数据库MySQL ...
- MFC进度条
一.成员函数简介 1.create()针对不是通过资源文件上拖拉进度条控件生成的进度条,需要用此函数创建一个. 2.SetRange()设置进度条的起始值和终止值. 3.SetPos()设置进度条的当 ...
- string替换所有指定字符串（C++）【转载】
转载自https://blog.csdn.net/a_222850215/article/details/79985504 C++的string提供了replace方法来实现字符串的替换,但是对于将字 ...
- [JZOJ 5791] 阶乘
题意:求一个最小的\(m\),保证\(\prod a[i] * x = m!\) 思路: 考虑\(m!\)里面有多少个东西?? \(m\)个. 且是一个排列. 那么求一个最小的\(m\)使得前面的式子 ...
- 7.RabbitMQ RFC同步调用
RabbitMQ RFC同步调用是使用了两个异步调用完成的,生产者调用消费者的同时,自己也作为消费者等待某一队列的返回消息,消费者接受到生产者的消息同时,也作为消息发送者发送一消息给生产者.参考下图: ...
- POJ 1159 Palindrome-最长公共子序列问题+滚动数组（dp数组的重复利用）（结合奇偶性）
Description A palindrome is a symmetrical string, that is, a string read identically from left to ri ...
- CVE-2017-3248简单复现
我是这样操作的 目标跟windows在一个段,linux是另一个段的,我的虚拟机 windows主机上 `java -cp ysoserial.jar ysoserial.exploit.JRMPLi ...
- Python3 From Zero——{最初的意识：000～Initial consciousness}
http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 a.编码 默认情况下,Python ...