十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)

4. 溢出的文字省略号显示

4.1 white-space

  • white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ;默认处理方式white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。

4.2 text-overflow 文字溢出

  • 设置或检索是否使用一个省略标记(…)标示对象内文本的溢出
text-overflow : clip ;不显示省略标记(...),而是简单的裁切 text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(...)

注意

一定要首先强制一行内显示,再次和overflow属性 搭配使用

在这里插入图片描述

4.3 单行文本溢出显示省略号——总结三步曲

  /*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

4.4 多行文本溢出显示省略号

多行文本溢出显示省略号,有较大兼容性问题,适合于webkit浏览器或移动端(移动端大部分是webkit内核)
在这里插入图片描述

在这里插入图片描述
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LAMP环境安装与apache配置

可以写在一起也可以分开写 sudo apt-get install apache2 php5 sudo apt-get install libapache2-mod-php5 php5-mysql 修改apache2.conf AddType 是与类型表相关的,描述的是扩展名与文件类型之间的关系,如:AddType application/x-x509-ca-ce…

LeetCode 2140. 解决智力问题(动态规划)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维整数数组 questions ,其中 questions[i] [pointsi, brainpoweri] 。 这个数组表示一场考试里的一系列题目,你需要 按顺序 (也就是从问题 0 开始依次解决)&#xff0…

计算机的起源和历史英语作文,端午节的由来和历史英语作文

端午节的由来和历史英语作文端午节与春节和中秋节并列为中国三大节日。下面是小编分享给大家的端午节的由来和历史英语作文,希望能给您带来帮助!端午节的由来和历史英语作文1The Dragon Boat Festival is a lunar holiday, occurring on the fifth day o…

LeetCode 2141. 同时运行 N 台电脑的最长时间(二分查找)

文章目录1. 题目2. 解题1. 题目 你有 n 台电脑。给你整数 n 和一个下标从 0 开始的整数数组 batteries ,其中第 i 个电池可以让一台电脑 运行 batteries[i] 分钟。 你想使用这些电池让 全部 n 台电脑 同时 运行。 一开始,你可以给每台电脑连接 至多一个…

十二、HTML5新增标签特性详解(audio、video、input)

HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念: 是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一…

联想新电脑桌面没有计算机,联想电脑没有wifi图标不见了怎么办

1.联想笔记本电脑WiFi图标不见了,怎么回事吧,试了很多方法一、无线网卡开关未打开;1、查看周边有没有手动百机械开关,一般在前面板,上面标有无线符号。2、按一下Fn无线信号键(度F几中的一个)找打无线WIFI3、打开控制机板,右上角查…

十三、CSS 3新特性详解(一)——属性、结构伪类、伪元素选择器,nth-child与nth-of-type区别,2D rotate,calc函数、滤镜filter、过渡transition

七、CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展、新增的样式 CSS3 发展现状 移动端支持优于 PC 端CSS3 目前还草案,在不断改进中CSS3 相对 H5,应用非常广泛 属性选择器列表 属性选择器代码演示 (1)E[att] 选择具有…

信息的表示和处理

文章目录1. 信息存储2. 整数的表示learn from 《深入理解计算机系统》 1. 信息存储 大多数计算机,一字节(最小的寻址单元) byte 8 bits 位 C语言中一个指针的值(无论它指向一个整数、一个结构或是某个其他程序对象)…

学硕计算机考296算高分么,考研总分是多少算高分?考研340分是什么水平?

原标题:考研总分是多少算高分?考研340分是什么水平?每个考研的学生都想考一个高分,分数越高代表录取的希望越大,但是考研达到多少分算高分呢?有没有衡量考研分数的标准呢?小编为大家整理了关于考研总分高分相关的相关信息,一起…

十四、CSS 3新特性详解(二)——2D转换(transform)、动画(animation)、动画序列

HTML5 第二天 一、rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤&#xff1a; 给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{transform: rotate(0deg); }二、三角 <!DOCTYPE html&…

pip/conda导出 requirements.txt 注意事项

pip 使用 pip freeze > ./requirements.txt 导出 requirements.txt 发现很多包没有版本号&#xff0c;而是 file:/// 使用pip list --formatfreeze > ./requirements.txt 导入安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt con…

fortune命令简介

本文转自《阮志峰的网络日志》&#xff0c;原文网址&#xff1a;http://www.ruanyifeng.com/blog/2015/04/fortune.html 作者&#xff1a; 阮一峰 日期&#xff1a; 2015年4月14日 美国中餐馆的最后一道菜&#xff0c;往往是小甜饼&#xff0c;叫做"幸运饼"&#xff…

十五、CSS 3新特性详解(三)——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style

HTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小物体和面遮挡不可见 三维坐标系 x 轴&#xff1a;水平向右 – 注意&#xff1a;x 轴右边是正值&#xff0c;左边是负值 y 轴&#xff1a;垂直向下 – 注意&#xff1a;y 轴下面是正值&#xff0c;上面是负值 z 轴&#x…

用计算机表白的数字,用数字表白的句子大全 如何用数字表白一段话

表白总是一个让人十分难忘的经历&#xff0c;如果大家想要对喜欢的人表白&#xff0c;又不好意思直说自己的想法&#xff0c;那么今天的这份用数字表白的句子大全就对你们很有帮助了。跟我一起看看&#xff0c;如何用数字表白一段话呢&#xff1f;一、用数字表白的句子大全1、3…

pip安装pytorch1.10.1+paddlepaddle-gpu2.2.1+cuda10.2+cudnn7.6.5

NV驱动下载安装https://www.nvidia.cn/Download/index.aspx多卡的话&#xff0c;安装 NCCL https://developer.nvidia.com/nccl/nccl-download配置 pip 源 vim ~/.pip/pip.conf [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple安装virtualenv包pip install vir…

jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)

day01 - jQuery 学习目标&#xff1a; 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​…

计算机主机显卡安装,安装后如何在计算机中启用独立显卡

如今&#xff0c;许多朋友对他们的计算机配置不满意&#xff0c;希望将计算机配置提高一些. 现在&#xff0c;我将告诉您如何设置带有高性能图形卡的笔记本电脑.详细信息如下:1. 第一步&#xff0c;在打开计算机电源后&#xff0c;右键单击桌面&#xff0c;然后在出现的菜单中显…

RHadoop和CDH整合实例(三)- RHive

五、 RHive的安装及测试 RHive依赖于Rserve&#xff0c;所有首先需要安装Rserve(在各个namenode上)&#xff0c;接下来在所有节点上启动Rserve&#xff1a; > sudo R > install.packages("Rserve") > q() > Rserve --RS-conf /usr/lib64/R/Rserv.…

LeetCode 2144. 打折购买糖果的最小开销(贪心)

文章目录1. 题目2. 解题1. 题目 一家商店正在打折销售糖果。每购买 两个 糖果&#xff0c;商店会 免费 送一个糖果。 免费送的糖果唯一的限制是&#xff1a;它的价格需要小于等于购买的两个糖果价格的 较小值 。 比方说&#xff0c;总共有 4 个糖果&#xff0c;价格分别为 1…

淘宝弹性布局方案lib-flexible实践

2个月前&#xff0c;写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路&#xff0c;当时也是因为工作的关系分析了下网易跟淘宝的移动页面&#xff0c;最后才有那篇文章的总结&#xff0c;可惜的是因为项目的关系&…