首页 前端知识 css小技巧:单行省略和多行省略

css小技巧:单行省略和多行省略

2024-02-28 10:02:15 前端知识 前端哥 639 895 我要收藏
  • 在日常学习中我们接触最多就是单行省略,文本超出一行之后使用省略号,那么当公司ui图上有这么一个需求:第一行正常展示,文本超出两行之后才使用省略号,那么该怎么写呢,接下来看代码,注意使用到的css样式——
  • 单行文本超出省略:
<style>
    .oneline{
        border: 1px solid red;
        background-color: skyblue;
        /* 固定最大宽度 */
        max-width:200px;
        /* 不换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 文本超出时,显示省略标记 */
        text-overflow: ellipsis;
    }
</style>

<div class="oneline">这是第一行超出文本宽度省略的内容</div>
  • 多行文本超出省略:(代码中的备注也很重要)
<style>
    .moreline{
        border: 1px solid red;
        background-color: skyblue;
        max-width:200px;
        /* 超出部分隐藏 */
        overflow:hidden;
        /* 文本超出时,显示省略标记 */
        text-overflow:ellipsis;
        /* 弹性伸缩盒子模型 */
        display:-webkit-box;
        /* 子元素呈现3行 */
        -webkit-line-clamp:3;
        /* 子元素排列方式为垂直 */
        -webkit-box-orient:vertical;  
        /*
            备注:注意这两个属性是搭配使用的,同时留意浏览器是否支持
            //Firefox 
            display:-moz-box;
            -moz-box-orient:horizontal;
            //Safari, Opera, and Chrome
            display:-webkit-box;
            -webkit-box-orient:horizontal;
        */
    }
</style>

<div class="moreline">这是更多行超出文本宽度省略的内容;这是更多行超出文本宽度省略的内容;这是更多行超出文本宽度省略的内容;这是更多行超出文本宽度省略的内容</div>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2850.html
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!