首页 > 其他分享 >CSS如何使文本溢出部分显示省略号?多行超出

CSS如何使文本溢出部分显示省略号?多行超出

时间:2023-08-17 20:46:38浏览次数:32  
标签:多行 省略号 CSS 超出 文本 css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS如何使文本溢出部分显示省略号?多行超出</title>
        <style>
            *{margin: 0px;padding: 0px;}
            .box{
                width: 280px;
                height: 62px;
                margin: 50px auto;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        </style>    
    </head>
    <body>
        <p class="box">
            css 实现多行文本超出长度显示省略号,css 实现多行文本超出长度显示省略号,
            css 实现多行文本超出长度显示省略号
        </p>
    </body>
</html>

 

CSS如何使文本溢出部分显示省略号?多行超出

标签:多行,省略号,CSS,超出,文本,css
From: https://www.cnblogs.com/mokeke/p/17638797.html

相关文章

  • html、css、js实现的一个简单计算器
    title:html、css、js实现的一个简单计算器date:2023-07-1721:51:46categories:CTF-Web入门description:简易计算器主要代码来自runoob的计算器示例,只是精简了一下,把在js里监听完成的清除输入区也写成了一个函数,点击按钮的时候就自动调用了。这里面是有clear函数的,导致我......
  • h5(html5)+css3前端笔记四
    Emmet语法1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div>2.如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div3.如果有父子级关系的标签,可以用>比如ul>li就可以了4.如果有兄弟关系的标签,用+就可以了比如div+p5.如......
  • css教程-li的list-style-type属性
    CSS中的ulli是用来定义无序列表样式的。其中,ul表示无序列表(unorderedlist),li表示列表项目(listitem)。你可以使用CSS来为ulli元素设置样式,如下所示:ul{list-style-type:disc;/*设置列表项的标志样式为实心圆*/margin:0;/*清除默认的外边距*/padding:0;/*清除......
  • 使用css样式完成文本超出的部分用省略号代替
    <p>使用css样式完成文本超出的部分用省略号代替</p>第一步要设置宽度,然后使用text-overflow:ellipsis等属性组合使用li{width:140px;background-color:red;overflow:hidden;/*溢出隐藏*/white-s......
  • 原生CSS嵌套简介
    嵌套是使用Sass等CSS预处理器的核心原因之一。现在,该功能已经以类似的语法出现在标准浏览器CSS中。你能否在构建系统时放弃对预处理器的依赖?CSS嵌套可以节省输入时间,并使语法更易于阅读和维护。迄今为止,你必须像这样键入完整的选择器路径:.parent1.child1,.parent2.child1{......
  • 【技术积累】Vue.js中的CSS过渡【一】
    CSS过渡是什么在Vue中,可以使用<transition>组件来实现CSS过渡效果。CSS过渡是指在元素的状态发生改变时,通过添加或移除CSS类来实现平滑的过渡效果。<transition>组件可以包裹需要过渡的元素,并通过name属性指定过渡效果的名称。然后,可以使用CSS样式来定义过渡的效果。以下......
  • css 显示不完...
    参考:https://www.cnblogs.com/Nyan-Workflow-FC/p/13852337.html显示一行,显示不完...white-space:nowrap;text-overflow:ellipsis;overflow:hidden;最多显示两行,显示不完...white-space:normal;display:-webkit-box;......
  • CSS3---------------渐变
    一、渐变--(gradient)#、CSS3渐变(gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度。CSS3定义了两种类型的渐变(gradients):1.线性渐变(LinearGradients)-向下、向上、向左、向右、对角方向:(tobottom、totop、toright、toleft、tobo......
  • CSS基础-行和段落常用属性
    介绍三个和行相关的属性。line-height定义行高,即行的高度,数值单位用px、字号倍数、百分比表示。<!--方式一属性单位为px--><style> p{ line-height:30px }</style><!--方式二不带单位,表示字号的倍数--><style> p{ line-height:1.5 }</style><!--方式三......
  • 【校招VIP】CSS校招考点之选择器优先级
    考点介绍:选择器是CSS的基础,也是校招中的高频考点,特别是复合选择器的执行优先级,同时也是实战中样式不生效的跟踪依据。因为选择器的种类较多,很难直接记忆,可以考虑选择一个相对值,比如id类型,然后把简单选择器和复合选择器进行理解记忆。另外在项目练习中实战使用增加理解。一、考......