精华内容
下载资源
问答
  • css设置文字溢出隐藏
    2022-04-18 17:12:25

    仅仅是用来提示自己,不要忘记的

    让文字只显示一行,超出显示省略号

    overflow: hidden; // 溢出部分隐藏 
    white-space: nowrap; // 文字不换行
    text-overflow: ellipsis; // 显示省略号
    

    多行文本, 显示 n 行,剩下的省略号替代

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 多行在这里修改数字即可,这里显示2行
    overflow:hidden;
    -webkit-box-orient: vertical;
    
    更多相关内容
  • Firefox奇怪的文字溢出bug,带滚动条的div容器里面的文字竟然溢出到容器之外,百思不得其解
  • 主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 文字溢出滚动展示

    2018-10-25 10:49:10
    文字溢出滚动展示,循环展示和一个展示的demo.
  • 在div布局中内容溢出了容器,超出了容器所限定的宽度应该怎么办呢?很是疑惑,于是搜集整理一番,发现可以让内容超出容器时超出部分显示省略号,这种做法不仅解决了问题,而且很美观,好了,不多说了,有兴趣的朋友...
  • 文字溢出,如何实现溢出的文字放入一个新生成的div中,原理就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中
  • overflow 属性说明: 版本:CSS2 兼容性:IE4+ NS6+ 继承性:无语法:overflow : visible | auto | hidden | scroll 相关参数说明如下: visible::不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被...
  • html文字溢出

    2021-09-23 00:36:38
    面试的时候有被问到这一个问题:文本框输入的文本溢出,结尾用省略号替换隐藏溢出部分怎么做。当时想着应该可以结合overflow:hidden进行这个操作,具体怎么做涉及到哪些属性我也没说出来(没有用过的缘故),现在在...

            面试的时候有被问到这一个问题:文本框输入的文本溢出,结尾用省略号替换隐藏溢出部分怎么做。当时想着应该可以结合overflow:hidden进行这个操作,具体怎么做涉及到哪些属性我也没说出来(没有用过的缘故) ,现在在这里总结一下。分为两种:一种是单行隐藏,一种是多行隐藏。

            单行:涉及到属性

    overflow:hidden        

            overflow 属性规定当内容溢出元素框时发生的事情。 当值为hidden内容会被修剪,并且其余内容是不可见的。

    white-space:norwap        

            white-space 属性设置如何处理元素内的空白。 当值为nowrap规定段落中的文本不进行换行。

    text-overflow:ellipsis        

            text-overflow 属性规定当文本溢出包含元素时发生的事情。 当值为ellipsis显示省略符号来代表被修剪的文本。

             多行:涉及到属性

    display:-webkit-box        

            将对象作为弹性伸缩盒子模型显示。(-webkit代表safari、chrome私有属性)

    -webkit-box-orient:vertical        

            Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。 box-orient 属性规定框的子元素应该被水平或垂直排列。 当值为vertical从上向下垂直排列子元素。 

    -webkit-line-clamp:3        

            限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。(必须结合上面两个属性)

    overflow-hidden

    代码 

    <!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>Document</title>
        <style>
            *{
                margin: 0;
                padding:0
            }
            html{
                width: 100%;
                height: 100%;
                
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div{
                background: #8ac592;
                width: 800px;
                height: 160px;
    
                display: flex;
                justify-content: center;
                align-items: center;
            }
            p{
                width:360px;
            }
            .p1{
                background-color: cadetblue;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                /* transform: translateY(-100%); */
            }
            .p2{
                background-color: rgb(93, 141, 187);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            span{
                font-size: 1.5rem;
            }
        </style>
    </head>
    <body>
        <div>
            <p class="p1"><span>p1</span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quasi nobis dolorem nam temporibus voluptate, corrupti ducimus explicabo sequi officia voluptatibus necessitatibus ullam molestias? Illum, nam! Velit pariatur odio laborum.</p>
            <p class="p2"><span>p2</span>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non modi ipsum fugit molestiae magni perspiciatis fugiat, eos eaque, ipsa, quas unde explicabo perferendis vero iusto. Laboriosam nam minima fugiat ipsa!</p>
        </div>
    </body>
    </html>

    运行效果 

     

    展开全文
  • 首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子,里面提到ie7下出现的文字溢出问题;于是又重新翻了以前怿飞斑竹的帖子,他提到的是注释引起的文字溢出问题,我今天看的时候发现在ie7下并没有产生多猪的...
  • css设置文字溢出省略号显示

    多人点赞 2022-02-14 17:50:45
    css设置文字溢出省略号显示,包括单行文字溢出省略号显示和多行文字溢出省略号显示。

    📋 个人简介

    • 💖 作者简介:大家好,我是阿牛😜
    • 📝 个人主页:馆主阿牛🔥
    • 🎉 支持我:点赞👍+收藏⭐️+留言📝
    • 📣 系列专栏:css🍁
    • 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

    请添加图片描述

    上期传送门:
    👉css中的选择器
    👉css盒子模型及其实战案例(上)
    👉css盒子模型及其实战案例(下)
    👉css网页布局之浮动及其实战案例(超详细)
    👉css中的定位详解
    👉css中元素的显示与隐藏
    👉我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧
    👉css三角的做法及其案例
    👉css布局技巧-css三角巧妙运用
    👉css布局技巧-文字围绕浮动元素巧妙运用
    👉css布局技巧-margin负值巧妙运用
    👉css布局技巧-行内块元素的巧妙运用
    👉css中 vertical-align 属性的应用和案例


    单行文字溢出省略号显示(重要)

    单行文本溢出显示省略号必须满足三个条件:

     /* 1.先强制一行内显示文本*/
     white-space : nowrap ; /*(默认 normal 自动换行)*/
     /* 2.超出的部分隐藏*/
     overflow : hidden ;
    /* 3.文字用省略号替代超出的部分 */
     text-overflow : ellipsis ;
    

    案例:

    <!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>Document</title>
        <style>
            div{
                width: 150px;
                height: 80px;
                background-color: skyblue;
                margin: 100 auto;
                 /* 1.先强制一行内显示文本*/
                white-space : nowrap ; /*(默认 normal 自动换行)*/
                /* 2.超出的部分隐藏*/
                overflow : hidden ;
                /* 3.文字用省略号替代超出的部分 */
                text-overflow : ellipsis ;
            }
    
        </style>
    </head>
    <body>
        <div>阿牛是世界上最好最帅的人</div>
        
    </body>
    </html>
    

    在这里插入图片描述

    多行文字溢出省略号显示(了解)

    多行文本溢出显示省略号,有较大兼容性问题,适合于 webkit 浏览器或移动动端(移动端大部分是 webkit 内核)

     overflow : hidden ;
     text-overflow : ellipsis ;
    /*弹性伸缩盒子模型显示*/
     display :-webkit-box ;
    /*限制在一个块元素显示的文本的行数,即在第几行显示省略号*/
     -webkit-line-clamp :2;
    /*设置或检素伸缩盒对象的了元素的排列方式*/
    -webkit-box-orient : vertical ; 
    

    案例:

    <!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>Document</title>
        <style>
            div{
                width: 150px;
                height: 45px;
                background-color: skyblue;
                margin: 100 auto;
                overflow : hidden ;
                text-overflow : ellipsis ;
                /*弹性伸缩盒子模型显示*/
                display :-webkit-box ;
                /*限制在一个块元素显示的文本的行数,即在第几行显示省略号*/
                -webkit-line-clamp :2;
                /*设置或检素伸缩盒对象的了元素的排列方式*/
                -webkit-box-orient : vertical ; 
            }
    
        </style>
    </head>
    <body>
        <div>阿牛是世界上最好最帅的人,啊啊啊啊啊啊啊啊啊啊啊啊</div>
        
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 实验代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...<head><meta ht
  • div固定大小,如果文字溢出则自动减小字号!
  • 主要介绍了JS实现中英文混合文字溢出友好截取功能,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性。需要的朋友可以参考下
  • 文字溢出自动向上循环滚动

    1 效果展示

    在这里插入图片描述

    2 代码

    <!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>Document</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        .wrap{
          padding: 20px;
          background-color: pink;
        }
        .box{
          max-height: 40px;
          overflow-y: hidden;
          line-height: 20px;
          font-size: 14px;
        }
      </style>
    </head>
    <body>
      <div class="wrap">
        <div class="box">
          <p class="content">Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。</p>
        </div>
      </div>
      <script>
        const box = document.querySelector('.box')
        const content = document.querySelector('.content')
        console.log(box.clientHeight, content.offsetHeight)
        if(content.offsetHeight > box.clientHeight) {
          // 拷贝追加一份子节点,撑开内容高度,使一份内容可以完全滚完
          const content2 = document.createElement('p')
          content2.innerHTML = content.innerHTML
          box.appendChild(content2)
          setInterval(() => {
            // 滚完一份内容的高度后,重置滚动位移
            if(box.scrollTop >= content.offsetHeight){
              box.scrollTop -= content.offsetHeight
            }else {
              // 自行滚动
              box.scrollTop++
            }
          }, 200)
        }
      </script>
    </body>
    </html>
    
    展开全文
  • 文章目录单行文字溢出打点展示多行文本溢出背景图片图片代替文字该怎么代替元素嵌套规则 单行文字溢出打点展示 <!-- 单行文字溢出打点展示 --> <p>法国议会选举第一轮投票结束马克龙坐在党领先</p&...
  • 主要介绍了使用word-wrap来防止文字溢出的办法,注意其在IE浏览器中的兼容问题,需要的朋友可以参考下
  • 文字溢出显示省略号
  • 文字溢出 我们经常需要做到在固定宽高内显示文字,当文字内容过多不希望全部显示,通过打…来代表文字未完,我们是这样做的 1.单行文本 .box{ white-space:nowrap;/*首先先让文本失去换行功能*/ overflow:hidden;...
  • 单行文字溢出处理 p { width: 100px; text-overflow: ellipsis;// 显示省略符号来代表被修剪的文本 white-space: nowrap; //文本不会换行,文本会在在同一行上继续,直到遇到标签为止 overflow: hidden
  • lineclamp:文字溢出

    2021-05-12 02:50:34
    文本溢出:多行省略号。 你是怎么做到的? . lineclamp { /* config */ line-height : 1.5 ; height : 3 em ; background-color : # fff ; /* config end */ position : relative; padding-right : 1 em ; ...
  • 单行文字溢出省略号显示 步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden; 3.文字溢出的时候用省略号显示 text-overflow: ellipsis; 效果: 样式: .ov-es{ margin: ...
  • 文字溢出显示规则,一般溢出通过css就完成了,但是宽度如果不确定那么将无法使用,普通的就使用js过滤,显示几个字符,但是中文与符号,英文占位不同,这样处理出来的效果显然不理想
  • 说明:注释造成文字溢出是IE的BUG,注释造成文字溢出与其位置有关,注释造成文字溢出与文字区块的固定宽度有关,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。 当溢出的文字字数大于文本的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,399
精华内容 25,759
关键字:

文字溢出

友情链接: X51asm.rar