学习css文本溢出显示省略号?
一、写在前面
今天携程面试,问题是这样的有一个span标签,其宽度为100px,我们需要给其设置文本,并且让其单行显示,超出部分使用省略号表示,当我们鼠标悬停在说上面的时候,然后再进行展示全部文本
。但是我不会,很尴尬。下面重新整理一下。
<!DOCTYPE html>
<html lang="cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#text {display: inline-block;width: 100px;border: 1px solid #000;/* 设置文本不进行换行 */white-space: nowrap;/* 让超出部分省略 */overflow: hidden;/* 超出部分使用省略号 */text-overflow: ellipsis;}#text:hover {white-space: normal;text-overflow: clip;}</style>
</head><body><span id="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span></body></html>
1、使用white-space属性设置不换行,overflow属性隐藏超出部分,text-overflow属性添加省略号。需注意必须有固定宽度才会出现效果。
二、扩展
多行文本显示省略号
<!DOCTYPE html>
<html lang="cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#text {display: -webkit-box;width: 100px;border: 1px solid #000;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}</style>
</head><body><span id="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span></body></html>
学习css文本溢出显示省略号?相关推荐
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果(text-overflow)
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- CSS文本溢出显示省略号怎么实现?
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
- vue css 文本溢出显示省略号、失效 相关问题整理
问题进阶 简单实现 打包后,居然没有效果! 注释加了,效果好了,控制台警告却亮起了(强迫症不能忍!!) 数字或英文情况下,省略号居然又没啦!!! 简单实现 max-width: 75px;displa ...
- CSS -文本溢出显示省略号
单行文本溢出 .hidden {overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap;(设置文字在一行显示,不能换行)text-overf ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- CSS实现文本溢出显示省略号
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
最新文章
- Bert代码详解(二)重点
- 串口操作之API篇 CreateFile
- 如何用Pygame写游戏(十五)
- 【转】oracle 和 ' 特殊字符处理 ( like 'GAC/_%' escape ''; 这里面的 / 居然将 转义了 为什么?)...
- iOS 中delegate的理解与使用(传值)
- L1-047 装睡 (10 分)—团体程序设计天梯赛
- centos7恢复mysql数据库_一文看懂mysql数据库备份恢复演练
- Java 多线程面试问题
- mi5splus android9,小米5SPlus 安卓9.0 原生体验 LineageOS16.0 ROOT
- 七牛sdk 上传视频 - 前端
- 园区IP地址规划(非常详细)
- 手电筒app制作实录
- 免费网站地图制作工具 —— Sitemap X
- 基于数组判断字符串是否是回文
- APK 签名:v1 v2 v3 v4
- 比尔·盖茨的另一扇视窗
- canvas绘制文本文本的
- 太阳能电池系统行业调研报告 - 市场现状分析与发展前景预测
- 斗地主(代码简易版)
- 图神经网络与图注意力网络相关知识概述