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 ...
随机推荐
- MaxCompute小文件问题优化方案
小文件背景知识 小文件定义 分布式文件系统按块Block存放,文件大小比块大小小的文件(默认块大小为64M),叫做小文件. 如何判断存在小文件数量多的问题 查看文件数量 desc extended + ...
- 27 和为S的两个数字
0 引言 题目描述:输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 1 抽象问题具体化 举例: 序列为{1,2,3,4 ...
- vue-组件之间的通信：
组件之间的通信:一个组件被调用,那么里面的数据就需要从前者调用,因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,谁调用这个组件谁就传递数据给这个组件,所以就要暴露一些接口, ...
- C/C++ Muti-Thread多线程编程学习（之）线程Thread | 创建、运行、结束
文章目录 前言 线程 Thread 创建线程 CreateThread _beginthread _beginthreadex pthread_create 线程运行 结束线程 前言 多线程(Mu ...
- error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead.【转载】
文章出处https://blog.csdn.net/qq_38721302/article/details/82850292 今天编写C++程序在使用头文件#include<cstring> ...
- MDK(KEIL) 两步解决 中文乱码 及 中文光标 半个半个跳的问题
1. 如果已经用MDK(KEIL)的默认设置写了好多中文,那么先用notepad把文件一一打开然后转变编码格式为 utf-8 without ROM,如下: 2. 如果还没有开始编辑,或者已经用not ...
- Windows系统下安装MySQL 8.0.11数据库
MySQL数据库是常用的数据库之一,而且该数据库开源免费,所以很多公司在使用.本文记录如何在Windows系统下安装MySQL数据库,本次安装的版本号为8.0.11,这个版本是当前的最新版本,据宣传, ...
- 分享一套高级Java笔试题(实拍高清图)
分享一套高级Java笔试题 微信群里群友分享的 刚好他在笔试 有些问题不会发到群里求助 如果你最近正好在面试 需要参考需要提升 这套试题或许对你有用 下面是部分分享原图 下面是微信群中群友的热议 非常 ...
- SpringIOC中的注解配置
Spring中的注解是个好东西,可以简化我们的操作,但是使用了注解又会在一定的程度上增加程序的耦合度,xml中的配置写在了类中虽然简化了开发过程,但是或多或少的违背了开闭原则.所以在开发过程中要先明确 ...
- Vue项目的配置项
目录 Vue项目的配置项 配置项 加载全局css文件 加载全局js文件 store仓库的配置和简单用法 BootStrap环境和jQuery的配置 前端后端交互(CORS问题) axios配置项(前端 ...