显示前半内容后半内容用省略号_CSS实现内容超出后显示省略号-程序员宅基地

技术标签: 显示前半内容后半内容用省略号  

文字超出了DIV或者HTML标签后,需要隐藏文字并显示省略号,这个在工作中很多时候都要用到,我想很多人都碰到过吧,本文就会讲述如何通过CSS实现内容超出后显示省略号。

一是用程序开截取字符长度,这个其实也是可以的

第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧,

css样式如下:.css1{

color:#6699ff;border:1px #ff8000 dashed;

margin-bottom:20px;

width: 20em;/*不允许出现半汉字截断*/

}

.css2 {

overflow: hidden; /*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号*/

white-space: nowrap;/*强制不换行*/

width: 20em;/*不允许出现半汉字截断*/

color:#6699ff;border:1px #ff8000 dashed;

}

html代码如下:

Web前端开发 – 专注于网站前端设计与Web用户体验
Web前端开发 – 专注于网站前端设计与Web用户体验

[/html]

.css1{

color:#6699ff;border:1px #ff8000 dashed;

margin-bottom:20px;

width: 20em;/*不允许出现半汉字截断*/

}

.css2 {

overflow: hidden; /*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号*/

white-space: nowrap;/*强制不换行*/

width: 20em;/*不允许出现半汉字截断*/

color:#6699ff;border:1px #ff8000 dashed;

}

Web前端开发 – 专注于网站前端设计与Web用户体验
Web前端开发 – 专注于网站前端设计与Web用户体验
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39801158/article/details/111554890

智能推荐

ubuntu 卡在waiting for unattended-upgr to exit的解决-程序员宅基地

文章浏览阅读1.2w次,点赞9次,收藏14次。https://blog.csdn.net/notacoder/article/details/102680465需要删除以下几个lock file就OK了 sudo rm /var/lib/apt/lists/lock sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock ht..._waiting for unattended-upgr to exit

C语言最简单的变量交换,【C语言】5种妙招教你轻松搞定变量值交换-程序员宅基地

文章浏览阅读1.6k次。C语言中交换两个变量值的操作经常会用到,也有不少人提问诸如不用临时变量怎么交换两个变量值的问题,今天我们在这里进行一个总结,一共有5种方法,希望大家看完有所收获。1.临时变量法方法解释:采用临时变量的方法,作为中间过渡,这是最简单也是大家最容易想到的方法,此法在各种场合应用极多,应该熟练掌握。#includeint main(void){int a=1,b=2,tmp;tmp =a;a=b;b=t..._交换两个变量的值c语言

ue4 怎么修改骨骼动画_它来了,它来了! 游戏角色与动画制作的智能工具 iClone Unreal Live Link 闪耀登场!!!...-程序员宅基地

文章浏览阅读1.1k次。点击蓝字关注我们它来了,它来了!游戏角色与动画制作的智能工具iClone Unreal Live Link闪耀登场!!!Reallusion研发团队近日最新发布了iClone Unreal Live Link系统,可实时创建在虚幻引擎系统中使用的角色、灯光、摄影机和动画,作为快速动画制作的智能工具iClone将动画创意、制作流程和精准可视化的技术优势与虚幻引擎的渲染技术完美结合,为动画、..._ue4 修改动画长度

css使两个盒子并列_css盒子模型(框模型)-程序员宅基地

文章浏览阅读7.5k次,点赞6次,收藏43次。简介:css处理网页时,它认为每个元素都包含在一个不可见的盒子里。把所有元素想象成盒子,那么对网页的布局就相当于摆放盒子。我们只需要将响应的盒子摆放到网页中相应的位置即可完成网页布局。盒子模型一个盒子我们会分成下面几个部分:内容区(content)内边距(padding)边框(border)外边距(margin)边框1.通过width和height实现一个100*100px的盒子2.为盒子设置边框..._css两个盒子并排

互联网大厂校招面试笔试题合集免费分享-程序员宅基地

文章浏览阅读438次,点赞10次,收藏9次。从编程语言、算法、数据库、网络、安全等多个角度进行分类,精选各互联网大厂的校招真题,帮助求职者提高自己的技术能力。编程语言:针对互联网大厂常用的编程语言(如Java、Python、C++、JavaScript等)的校招真题,涉及语法、算法、数据结构、虚拟机等。数据库:针对互联网大厂的SQL和NOSQL(如MySQL、PostgreSQL、MongoDB、Redis等)的校招真题。算法与数据结构:针对互联网大厂常用的数据结构和算法(如排序、查找、图、树、堆等)的校招真题。互联网大厂校招面试笔试题合集。

北邮计算机复试读英语,简单的说一下北邮的复试过程吧-程序员宅基地

文章浏览阅读1.5k次。逛论坛好久,却一直找不到北邮的复试方面的详细信息。今年既然自己考上了,又想起当初自己因为到处都找不到北邮复试的具体细节而迷茫,所以想趁着现在有时间,写一点北邮计算机复试方面的东西,希望对后面的学弟学妹们有帮助。开头先说一下,北邮计算机招生是以组为单位,所以面试情况不一定适用于所有组,我报的是12组。北邮的复试流程大概为心理测试、缴费、报道、听力、笔试、上机、面试、政审、体检,其中口语包括在面试里面..._北邮复试英语翻译

随便推点

凭啥发奖金的时候,测试的分的最少?为啥地位这么低,我!_测试在拿项目奖金的时候-程序员宅基地

文章浏览阅读246次。凭什么测试的的奖金最少_测试在拿项目奖金的时候

java.net.SocketException: Software caused connection abort: socket write erro问题-程序员宅基地

文章浏览阅读2.5k次。导出报错所有导出excel无法实现,查询的所有的导出都有问题ClientAbortException: java.net.SocketException: Software caused connection abort: socket write errorat org.apache.catalina.connector.OutputBuffer.realWriteBytes(O..._java.net.socketexception: software caused connection abort: socket write err

我收集了39节从0入门《人工智能+Python》视频课,价值1999,免费下载 等会就删!...-程序员宅基地

文章浏览阅读631次。近几年来人工智能常常成为热门议题,经久不衰。2020年以来,在各种政策红利催化、5G商用助推、物联网、大数据、AI芯片技术大规模落地后,几乎所有人都已经笃定,人工智能就是IT人未来的新风..._python人工智能零基础视频教程下载

php背景自动切换图片,威联通NAS自动更换背景图片-程序员宅基地

文章浏览阅读928次。威联通NAS自动更换背景图片2019-12-23 13:45:380点赞5收藏0评论如何才能快速换一种生活方式?参加#牛年Flag#征稿活动,征集你2021年的购物学习生活计划!>>点击查看活动详情<看了值友得文章https://post.smzdm.com/p/andgv3n0/很感兴趣 ,可是我是威联通的NAS,再带的busybox里面的grep没有对应的参数,网上找了一下,..._威联通 更换壁纸

机器学习 | 详解GBDT在分类场景中的应用原理与公式推导_gbdt分类预测模型的应用条件-程序员宅基地

文章浏览阅读417次。本文始发于个人公众号:TechFlow,原创不易,求个关注今天是机器学习专题的第31篇文章,我们一起继续来聊聊GBDT模型。在上一篇文章当中,我们学习了GBDT这个模型在回归问题当中的原理。GBDT最大的特点就是对于损失函数的降低不是通过调整模型当中已有的参数实现的,若是通过训练新的CART决策树来逼近的。也就是说是通过增加参数而不是调整参数来逼近损失函数最低点。如果对于这部分不是很理解的话,可以通过下方的链接回顾一下之前的内容:机器学习 | 详解GBDT梯度提升树原理,看完再也不怕面试了逻辑_gbdt分类预测模型的应用条件

python 爬取加密视频_使用Python抓取m3u8加密视频 续:获得index.m3u8 地址-程序员宅基地

文章浏览阅读7.2w次。之前写《使用Python抓取m3u8加密视频》笔记的原因,是自己有几个视频想保存,但对于m3u8, .ts 文件拼接不熟悉,就尝试写个脚本练手。今天看了回复,有同学想知道如何从视频网站上获得 index.m3u8 主文件的链接。正好有空,找了个网站看了下,分享笔记如下使用包import requests, refrom lxml import etree # 最近爱上xpath,速度比Beaut..._index网站入口m3u8

推荐文章

热门文章

相关标签