首页 > 其他分享 >CSS超出长度范围显示省略号

CSS超出长度范围显示省略号

时间:2023-12-06 18:13:02浏览次数:28  
标签:省略号 超出 ellipsis 长度 overflow 文本 CSS

要在CSS中实现超出长度显示省略号的效果,你可以使用以下属性:

  1. overflow:该属性定义了当内容溢出元素框时发生的事情,此处我们将它设为hidden,意味着溢出的内容会被隐藏。
  2. white-space:该属性设置如何处理元素内的空白,我们将其设为nowrap,这样文本就不会自动换行。
  3. text-overflow:此属性定义如何显示被覆盖的溢出内容,我们将其设为ellipsis,这样就会在文本末尾显示省略号(...)。

示例代码如下:

 
  .ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

然后,将该样式应用到你的HTML元素上,例如:

 
  <div class="ellipsis">这是一段很长的文本,会超出容器的范围。</div>

这样,当文本长度超出div容器的宽度时,就会在文本末尾显示省略号。

标签:省略号,超出,ellipsis,长度,overflow,文本,CSS
From: https://www.cnblogs.com/youantianqin/p/17880204.html

相关文章

  • 用html和css和js实现一个班级点名
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>班级点名系统</title>......
  • CSS的逻辑组合伪类
    CSS的逻辑组合伪类有4种,分别是::not()、:is()、:where()和:has()。否定伪类:not():not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negationpseudo-class)。也叫否定伪类,是在元素与括号里面的参数不匹配的时候,就会对这......
  • antd 5.0 定制主题如此酷炫,我决定开启 @ant-design/cssinjs 阅读之旅
    前言antd5.0正式发布已经有一段时间了,发布当天,一心二用的看完直播。很喜欢整个设计,有种简约快乐工作的感觉,某些功能设计初衷也给了我一些启发。antd5.0提供的主题定制挺酷炫的,加之我最近对「CSS-in-JS」很感兴趣。于是迫不及待的打开了它的源码,准备研究一番。我大部分情况下都......
  • svg+css实现带灰色背景的loading加载动画组件
    <template><svgclass="load"viewBox="25255050":style="{width:loadWidth,height:loadWidth}"><circleclass="loading_bg"cx="50"cy="50"r="20"......
  • CSS结构伪类选择器之否定伪类:not
    结构伪类选择器是针对HTML层级结构的伪类选择器。常用的结构化伪类选择器有::root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:empty选择器......
  • CSS按钮样式之button标签与input type=button的区别
    原文链接:1、https://www.cnblogs.com/weihanli/p/5162828.html         2、https://www.cnblogs.com/smile6542/p/11968175.html   如果想要在页面上表示一个显示文本的按钮推荐input[type=”button”]方式,如果想要呈现一个图片内容或内容更丰富的按钮推......
  • CSS简介及常用样式
    一、CSS简介CSS:层叠样式表(英文全称:CascadingStyleSheets):是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。二、CSS选择器2.1基本选择器(三种)1.标签选择器<style>p{font-size:20px;......
  • 02.css
    1.标准的CSS盒子模型及其和低版本的IE盒子模型的区别?标准(W3C)盒子模型:width =内容宽度(content)+border+padding+margin低版本IE盒子模型: width =内容宽度(content+border+padding)+margin区别:标准盒子模型盒子的height和width是content(内容)的宽高,而IE盒子模型盒子......
  • 纯CSS实现炫酷背景霓虹灯文字效果
    如图所示,这是一个很炫酷的霓虹灯文字效果且背景炫酷,就像很多个灯光闪烁着不同的颜色。本次文章将解析如何用CSS代码实现这个效果,根据上面的动图分析出我们要实现的几个主要功能点:整个背景中有平均分布的小点衬托中心区域文字闪烁效果如同霓虹灯一样文字背景呈多个平均分布的......
  • vue3中css使用js中的变量
    <scriptsetuplang="ts">import{SoundOutlined}from'@ant-design/icons-vue'constprops=defineProps({title:{type:String,default:''},color:{type:String,default:'#000'}......