首页 > 其他分享 >CSS超出溢出显示省略号

CSS超出溢出显示省略号

时间:2023-08-12 17:02:11浏览次数:37  
标签:省略号 space text height CSS overflow 溢出

作用:为了避免文本文字内容超出一定宽度后溢出,我们想要溢出的部分不显示但用省略号(...)显示

使用:overflow与text-overflow顺序不能改换

强制不换行:white-space:nowrap

将行无素换成块元素[单独占一行]:dispaly:block

.ac li {

   display: block;

   float: left;

   width: 10%;

   height: auto;

   padding: 2px;

   margin: 0;

   line-height: 18px;

   font-size: 14px;

   white-space: pre-wrap

   overflow: hidden;

   text-overflow: ellipsis;

}



参考地址:http://www.divcss5.com/rumen/r532.shtml?_d_id=f7d0748e20e2c9dbdd095b9a93e6f9

标签:省略号,space,text,height,CSS,overflow,溢出
From: https://blog.51cto.com/jition/7060086

相关文章

  • C C++ Java python HTML/CSS/JavaScript
    C/C++是一种底层的语言,它可以直接操作内存和硬件,运行速度很快,但是也很难学习和调试,容易出错。Java是一种面向对象的语言,它可以跨平台运行,有很多成熟的框架和库,适合做大型的企业级应用,但是也很繁琐和冗长,需要写很多代码。Python是一种高级的语言,它可以用简洁的语法来实现复杂的功能......
  • css块级标签、行内标签、行内块标签的特点和相互转换
    块级元素常见的块级元素h1-h6、div、p、ul、ol、li等,div最常用!块级标签的特点独占一行高度、宽度、内外边距都可以设置(重要)宽度默认是容器(父级标签)的100%是一个容器盒子,里面可以放其他行内或者块级元素注意点:1.文字类的元素内,不能在放块级元素,比如p标签、h1-h6......
  • emmet快速生成html标签和css样式
    emmet快速生成html标签语法1.生成标签,直接输入标签名,按下tab键即可;2.生成多个相同标签,加上即可,如生成3个div标签,div3;3.生成父子级的标签,使用>号,如ul>li;4.生成兄弟标签,使用+号,如div+p;5.生成带有类名或者id名的标签,直接写.demo或者#id按下tab键即可;6.如果生成的div类名是......
  • CSS基础:学习CSS样式的基本语法和应用,了解如何美化网页。
    CSS(层叠样式表)是一种用于描述网页上元素(例如文字、图像、背景等)外观和布局的样式语言。通过使用CSS,您可以控制和改变网页的外观,使其更具吸引力和易于使用。下面是一些CSS基础知识和常用的语法:选择器:CSS中的选择器用于选择要应用样式的HTML元素。最常见的选择器是元素选择器(例如......
  • CSS中clear:both清除元素的浮动
    作用是清除元素的浮动,当一个元素的浮动属性被设置为clear:both时,它将不再受到其他元素的影响,而是被放置在文档流的最下方clear:both的运用场景clear:both的运用场景主要有以下几种:1、当两个块级元素并排放置时,可以使用clear:both来清除浮动,以使得两个元素不会互相影响。2、当一个块......
  • 记录--用css画扇形菜单
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1、效果图用手机录屏再用小程序转换的gif,可能精度上有点欠缺。2、实现过程1、观察及思考开始编码前我们首先观察展开后的结构:两个四分之一的圆加三个圆形菜单项。文章名为用css画扇形,如上图所示没有任何Java......
  • 插件系列 vue2安装tailwindcss
    官方网址:https://www.tailwindcss.cn/docs/installation安装步骤:直接安装创建文件tailwindcss.cssmain.js全局引入文件tailwindcss.css在项目更目录下执行初始化配置文件指令第一步:直接安装npminstall-Dtailwindcss@npm:@tailwindcss/postcss7-compatpostcs......
  • 重置CSS的必要性
     在Web开发中,CSS(层叠样式表)起到了控制网页布局和样式的重要作用。然而,由于不同网站浏览器对CSS的解释和支持略有差异,导致在不同浏览器下,同一网页可能出现布局错乱、样式不一致等问题。为了解决这些问题,ResetCSS的出现变得至关重要。Reset.css的作用ResetCSS是一种CSS文件,它......
  • 30个你必须熟记的CSS选择器
    你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。*{margin:0;padding:0;}首先我们来认识一些简单的选择......
  • css3瀑布流布局遇见截断下一列展示后半截现象
    css3瀑布流布局遇见截断下一列展示后半截现象注:css3实现瀑布流布局简直不要太香~~~~~场景-在uniapp项目中当瀑布流布局column-grap:10px相邻两列之间的间隙为10px,column-count:2,2列展示时,就出现了截断问题,如下图:代码如下:<viewclss="feeds-comtainer"><viewclass="fee......