精华内容
下载资源
问答
  • css文本超出 自动换行
    2022-03-13 13:20:54
     .card-item {
    	width: 32%;
    	font-size:28upx;
    	word-break: break-word;//文本超出 自动换行
      }
    
    更多相关内容
  • //超出文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决...
  • 下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替,基于css代码是怎么实现的呢?下面脚本之家小编通过分析本文给大家详解,感兴趣的朋友一起学习吧
  • css文本超出省略

    2022-03-31 14:51:46
    单行超出省略 .ol{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } 2行超出省略 .tl{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...

    单行超出省略

    .ol{
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	word-break: break-all;
    }
    

    2行超出省略

    .tl{
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
    }
    

    多行超出省略

    .ml{
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 3;
    	overflow: hidden;
    }
    

    不换行

    .unbr{
    	white-space: nowrap;
    }
    
    展开全文
  • 如何在CSS中文本超出隐藏,我们可以使用overflow:hidden来隐藏以及CSS中的text-overflow属性给隐藏部分添加省略号

    一、操作

      我们经常在写页面的时候会碰到文字内容太多超过盒子内容对于这种情况我们常常会用overflow:hidden来隐藏,但是今天就要告诉大家一个新的小知识点,我们可以用它将超出部分的文章隐藏,并用省略号来代替,代码如下:

    /*单行*/
    span {
      overflow: hidden;
      white-space:nowrap;
      text-overflow: ellipsis;
    }
    /*多行*/
    span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; // 此行用于控制从多少行开始,溢出时用省略号替换
        overflow: hidden;
        word-break:break-all; // 自动换行
    }

    二、属性介绍 

    1. CSS text-overflow 属性
      描述
      clip修剪文本。
      ellipsis显示省略符号来代表被修剪的文本。
      string使用给定的字符串来代表被修剪的文本。
    2. CSS overflow 属性
      描述
      visible默认值。内容不会被修剪,会呈现在元素框之外。
      hidden内容会被修剪,并且其余内容是不可见的。
      scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
      auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
      inherit规定应该从父元素继承 overflow 属性的值。
    3. CSS white-space 属性
      描述
      normal默认。空白会被浏览器忽略。
      pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
      nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
      pre-wrap保留空白符序列,但是正常地进行换行。
      pre-line合并空白符序列,但是保留换行符。
      inherit规定应该从父元素继承 white-space 属性的值。
    展开全文
  • css 文本超出自动滚动

    千次阅读 2021-01-11 12:05:25
    假设滚动的这个东西类名为name 1. name的父元素宽度一定,且小于name的宽度,且父元素overflow: hidden; 2. 下面2.35rem是name的父元素的宽度, 可替换为别的 .name { white-space: nowrap;...

    假设滚动的这个东西类名为name

    1. name的父元素宽度一定,且小于name的宽度,且父元素overflow: hidden;

    2. 下面2.35rem是name的父元素的宽度, 可替换为别的

    .name {
        white-space: nowrap;
    }
    .name.scroll {
        animation: 3s wordsLoop linear infinite;
    }
    @keyframes wordsLoop {
        0% {
            transform: translateX(0px);
        }
        25% {
            transform: translateX(0px);
        }
        75% {
            transform: translateX(calc(-100% + 2.35rem));
        }
        100% {
            transform: translateX(calc(-100% + 2.35rem));
        }
    }

    3. 当name宽度超过父元素宽度时,为其添加scroll类

    以下是在vue中的操作:

    1)绑定一个ref和一个scroll类

    <div 
        class="name" 
        v-html="currentSong.name" 
        ref="songName1" 
        :class="{ scroll: nameScroll }">
    </div>

    2)data里加一个nameScroll: false

    3) 2.35 * parseInt(document.querySelector('html').style.fontSize) 是我项目里name的父元素宽度,可以替换为别的。这段代码写在哪需要根据自己的项目调整,需要在name渲染之后调用。

    if (this.$refs.songName1.clientWidth > 2.35 * parseInt(document.querySelector('html').style.fontSize)) {
        this.nameScroll = true
    } else {
        this.nameScroll = false
    }

     

    展开全文
  • css文本超出

    2020-12-01 13:24:51
    1. css一行文本超出... overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.多行文本超出显示... display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: ...
  • CSS Code复制内容到剪贴板 .text-overflow { display:block;/*内联对象需加 */  width:31em;/* 何问起 hovertree.com */  word-break:keep-all;/* 不换行 */  whitewhite-space:nowrap;/* 不换行 ...
  • 超出单行显示 .line{ /* 单行显示 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis } 超出多行显示 .multi-line{ word-break: break-all; text-overflow: ellipsis; ...
  • css文本超出显示...

    千次阅读 2021-02-05 15:20:50
    第一种: 不能换行,只有一行才能生效 text-overflow: ellipsis: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 第二种: 指定行数(-webkit-line-clamp:可以把 块容器 中的内容限制为指定的行数...
  • CSS 文本超出隐藏,并显示省略号

    千次阅读 2021-10-28 18:42:20
    CSS 文本超出隐藏,并显示省略号
  • //超出文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 二、多行文本溢出显示省略号 overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性...
  • css文本超出换行

    万次阅读 2019-09-18 15:45:11
    先是这样的: 添加:**word-wrap: break-word**后 兼容性:
  • 超出隐藏显示省略号 text-overflow: ellipsis; 显示那三个点 word-break: break-all; 如果不确定会有纯数字或者中文那一定要加上这句,不然到时候就会出现数字有作用而中文却没有作用,或者中文有作用而数字...
  • css文本超过div的宽度时,让它进行自动换行,并且超过div高度时候,在最后一行加省略号...
  • css文本超出隐藏 显示三个点

    千次阅读 2021-07-23 11:25:45
    文本超出显示三个点一般分两种情况  一,单行文本超出隐藏  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap;  二,多行文本超出隐藏  text-overflow: -o-ellipsis-lastline;  overflow...
  • css文本超出后隐藏

    千次阅读 2019-03-14 13:54:16
    1.单行 部分浏览器还需要加宽度width属性。 .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;...2、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对...
  • CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
  • css 文本超出强制换行未生效??

    千次阅读 多人点赞 2020-12-11 16:01:58
    话不多说先上图 页面尺寸发生变化,居然不换行??? 再看下代码: word-break:break; 没毛病??? 赶快F12下 是的它没有生效集妹们 好吧我还要改bug,直接上解决办法吧 它的爸爸影响了孩子的未来!......
  • CSS文本 超出内容显示... / 换行

    千次阅读 2020-12-25 14:11:23
    超出内容显示… text-overflow: ellipsis; 换行: word-break: normal|break-all|keep-all;
  • 布局两栏布局,左边定宽,右边 flex-grow: 1,自动填满剩余空间。image.png{{book.name}}{{book....因此 .name 总有足够的宽度在一行内显示所有文本,也就不能触发截断省略的效果。SCSS.book-box {display: flex;.b...
  • text-overflow语法:text-overflow : clip | ellipsistext-overflow参数值和解释:clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...)text-overflow应用说明:CSS text-...
  • css 文本超出显示省略号不起作用

    千次阅读 2020-07-16 09:04:37
    一、单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行文本显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...
  • CSS文本超出部分隐藏

    2018-03-16 19:56:46
     //文本超出隐藏text-overflow:ellipsis; //文本超出用...显示 如果不想显示...改成 text-overflow:clip;white-space:nowrap; //超出不换行 如果不设置white-space:nowrap;属性的话 那么文本会出现这样的情况 ...
  • //超出文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得。 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? css3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,181
精华内容 12,872
关键字:

css文本超出 。。。