Css实现...省略号的效果

这篇具有很好参考价值的文章主要介绍了Css实现...省略号的效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文分为单行省略号的实现和多行省略号的实现

介绍:我们无论写练习或者写项目的时候,像用户名字过长或者文本信息过长需要用到省略号的效果,特此总结一下用法

1、单行省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省略号的实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div>
        样式小白是小白样式小白是小白样式小白是小白样式小白是小白样式小白是小白
    </div>
</body>
</html>

像这种情况,我们一看就会溢出

css一行省略号样式,CSS,css,前端

 是叭,我们给div加上overflow:hidden会隐藏掉,但是不太美观就需要用到省略号

给div加上如下样式

        div{
            width: 200px;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

效果就达到了

css一行省略号样式,CSS,css,前端

 2、多行省略号

还是先写基础代码,我们这次的div高度要大一些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省略号的实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div>
        样式小白是小白样式小白是小白样式小白是小白样式小白是小白样式小白是小白样式小白是小白
    </div>
</body>
</html>

css一行省略号样式,CSS,css,前端

 假设我们要把它变成三行省略

div样式

        div{
            width: 200px;
            height: 60px;
            -webkit-line-clamp:3; //固定三行省略好
            display: -webkit-box; // 旧版弹性盒子
            -webkit-box-orient:vertical; // 主轴垂直
            overflow: hidden; // 隐藏
        }

效果:

css一行省略号样式,CSS,css,前端

 文章来源地址https://www.toymoban.com/news/detail-613062.html

到了这里,关于Css实现...省略号的效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS实现单行或者多行文本溢出隐藏并且显示省略号

    如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行; 详细步骤: 第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略) 第二步(溢出隐藏)overflow:hidden; 第三步(文本溢出显示省略号)text-overf

    2024年02月16日
    浏览(32)
  • CSS:实现文字溢出显示省略号且悬浮显示tooltip完整信息

    组件: element ui中的tooltip组件 思路:通过ref获取宽度进行判断,当子级宽度大于对应标签/父级宽度显示tooltip组件

    2024年02月09日
    浏览(38)
  • CSS-设置省略号

    写前端页面的时候很多情况下需要省略号, 单行文本 溢出省略号 设置 单行文本省略号 的写法  : 先设置宽固定的宽度  :width: 300px;      必须要的    设置不换行 :white-space:nowrap; 设置省略号:text-overflow: ellipsis; 裁剪多余的内容/溢出的内容:overflow: hidden;  

    2024年02月12日
    浏览(24)
  • css文本超长显示省略号,鼠标hover省略号展示全部内容

    有时候我们会发现鼠标hover到文字省略号上,会展示出全部内容,效果如下: 首先,文字过长展示省略号 再借助鼠标悬停标签展示其 title 内容的特性,为标签加上 title属性,实现我们想要的效果 有关 title 属性的介绍:

    2024年02月11日
    浏览(34)
  • 【css】超过文本显示省略号

    显示省略号的前提:必须有指定宽度 一、单行文本超出部分显示省略号 属性 取值 解释 overflow hidden 当内容超过盒子宽度, 隐藏溢出部分 white-space nowrap 让文字在一行内显示, 不换行 text-overflow ellipsis 如果溢出的内容是文字, 就用省略号代替 二、多行文本超出部分显示省略号

    2024年02月13日
    浏览(22)
  • css单行文本溢出显示省略号

    可以使用CSS中的 text-overflow 属性来实现单行文本溢出显示省略号。 具体实现步骤如下: 首先,将需要显示省略号的元素的宽度设置为固定值或最大宽度。 接着,使用 white-space 属性将元素的文本内容强制放在一行中,防止换行。 然后,使用 overflow 属性将超出元素宽度的文本

    2024年02月11日
    浏览(29)
  • css多行文本溢出显示省略号

    在CSS中,对于多行文本的溢出显示省略号,可以使用 display 属性配合 -webkit-line-clamp 和 -webkit-box-orient 来实现。 具体实现步骤如下: 首先,将需要显示省略号的元素设置为块级元素,并且固定高度。 接着,使用 -webkit-box-orient 属性将元素内部的子元素按照垂直方向排列。 然后

    2024年02月11日
    浏览(30)
  • CSS设置文本不换行多余文字显示省略号

    文章目录 一、使用步骤 代码如下(示例): 代码如下(示例):

    2024年02月12日
    浏览(27)
  • H5+Css3文本溢出添加省略号(包括插件)

    局限性: 使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。 将height设置为line-height的整数倍,防

    2024年02月07日
    浏览(43)
  • 微信小程序——CSS限制文字宽度和行数(溢出显示省略号)

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 监听页面滑动 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 判断用户上滑还是下滑 https://blog

    2024年02月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包