精华内容
下载资源
问答
  • 文字一行显示多余隐藏

    千次阅读 2014-03-24 19:33:32
    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏...
    一般的文字截断(适用于内联与块):
    
    .text-overflow {
    display:block;/*内联对象需加*/
    width:31em;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }
    
      对于表格文字溢出的定义:
    
    table{
    width:30em;
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
    }
    td{
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }
    展开全文
  • CSS 设置文字显示一行多余显示省略号

    万次阅读 多人点赞 2018-05-10 10:31:04
    CSS 设置文字显示一行多余显示省略号 .view-text{ /** 思路: 1.设置inline-block属相 2.强制不换行 3.固定高度 4.隐藏超出部分 5.显示“……” */ display: inline-block; white-space: nowrap; ...

    CSS 设置文字只显示一行,多余显示省略号

    
    .view-text{
      /**
    	思路:
    	1.设置inline-block属相
    	2.强制不换行
    	3.固定高度
    	4.隐藏超出部分
    	5.显示“……”
      */
      display: inline-block;
      white-space: nowrap; 
      width: 100%; 
      overflow: hidden;
      text-overflow:ellipsis;
    }
    

    显示两行

    <div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
    
    /**
    思路:
    	1.超出的文本隐藏
    	2.溢出用省略号显示
    	3.溢出不换行
    	4.将对象作为弹性伸缩盒子模型显示
    	5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
    	6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
      */
      .text2{
    	width:200px;
    	word-break:break-all;
    	display:-webkit-box;
    	-webkit-line-clamp:2;
    	-webkit-box-orient:vertical;
    	overflow:hidden;
    }
    
    展开全文
  • 通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行文字用省略号替代,并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求,显然设置这个属性是无法完成的。 超出两行...

    element-UI表格的列属性

    通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代,并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求,显然设置这个属性是无法完成的。

    超出两行隐藏多余文本,移入时tips显示全部内容

    我们想完成的是超出两行才用省略号隐藏多余文本,并且移入才会有tips显示;两行以内的文本则不隐藏也不显示tips。

    超出的文本的隐藏

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

    文本超过两行,移入时tips显示全部内容

    <!-- tips悬浮提示 -->
    <el-tooltip
            placement="top"
            v-model="scope.row.showTooltip"
            :open-delay="500"
            effect="dark"
            :disabled="!scope.row.showTooltip">
      <div slot="content">{{scope.row.note}}</div>
      <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
    </el-tooltip>
    

    注意! 显示悬浮提示时v-modeldisabled属性要一起使用才有效果。

    showTips(obj, row){
          /*obj为鼠标移入时的事件对象*/
    
          /*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
          let TemporaryTag = document.createElement('span');
          TemporaryTag.innerText = row.note;
          TemporaryTag.className = 'getTextWidth';
          document.querySelector('body').appendChild(TemporaryTag);
          let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
          document.querySelector('.getTextWidth').remove();
    
          /*cellWidth为表格容器的宽度*/
          const cellWidth = obj.target.offsetWidth
    
          /*当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行*/
          currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
    }
    

    通过长度判断

    在这里插入图片描述
    一开始我是想通过表格高度去判断,但是后来发现,高度不是一个固定不变的值,会随着移入移出变化,并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断,把文本宽度与容器宽度比较,这样得到的值才是固定不变的。


    有朋友说会出现多个tips,我是直接放在el-table-column的template里面的,目前没发现这种情况。

    <el-table-column
                    prop="note"
                    label="简介">
              <template slot-scope="scope">
                <!-- tips悬浮提示 -->
                <el-tooltip
                        placement="top"
                        v-model="scope.row.showTooltip"
                        :open-delay="500"
                        effect="dark"
                        :disabled="!scope.row.showTooltip">
                  <div slot="content">{{scope.row.note}}</div>
                  <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
                </el-tooltip>
              </template>
            </el-table-column>
    
    展开全文
  • 有时候只想要在第二的时候隐藏,然后后面跟上小数点显示出来,就不需要用JS或者juqery之类的去写了,这个更简单粗暴。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style>
    div{
    width:500px;
    text-overflow: -o-ellipsis-lastline;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;  

    }
    </style>


    <body>
     <div>我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!</div>
    </body>
    </html>
    展开全文
  • 先简单说明一下这里是指在HTML的span button 等其他行内元素,多于一行时会自动换行,但是有时候只需要显示一行,多余 隐藏的实现.思路过程都很简单,但是还是值得记录一二
  • 今天遇到一问题,文字需要一行显示,多了用省略号代替 css进行解决 下面是一个小demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" ...
  • 写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字显示一行多余文字隐藏并加上省略号,悬浮时隐藏文字显示出来?解决问题时发现了css3的一个新标签 text-overflow ,其属性规定当文本溢出包含...
  • <div>...链接文字内容链接文字内容链接文字内容链接文字内容</a></div> div{width:40px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:norwap;} ...
  • 一行显示否则省略号 word-break: break-all; /*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/ text-overflow: ...
  • http://www.w3.org/1999/xhtml">      div{ white-space: nowrap; text-overflow:ellipsis; text-overflow: ellipsis;...文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  • css一行文字多余的部分省略号隐藏的解决办法,代码如下,直接复制过去,即可使用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  • div{ white-space: nowrap; text-overflow:ellipsis; text-overflow: ellipsis; overflow:hidden; }   文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  • .view-text{ /** a.设置inline-block 属性 b....隐藏超出部分 e.显示“……” */ display: inline-block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow:ellipsis;} 转载于...
  • css3文字一行展示,多余文字省略号 重点: 一行展示: text-overflow: ellipsis white-space: nowrap overflow: hidden 多行展示: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
  • 实现目标:在单元格中显示部分内容,多余出来的内容隐藏,在显示的内容后面有省略号与显示按钮,点击显示后,显示全部文字,并显示隐藏按钮,javascript代码如下: // 每行显示21个字,超过省略,用查看更多 ...
  • 文字一行显示,多出部分显示成省略号 html结构 <div class="title">前端开发工程师</div> 对应的css样式为 .title{ width: 50px; color: skyblue; white-space: nowrap; overflow: hidden; ...
  • 写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字显示一行多余文字隐藏并加上省略号,悬浮时隐藏文字显示出来?解决问题时发现了css3的一个新标签 text-overflow,其属性规定当文本溢出包含...
  • //超出隐藏 text-overflow: ellipsis;//超出使用省略号 display: -webkit-box; -webkit-line-clamp: 2;//第几 -webkit-box-orient: vertical; width: 400px;//根据需要自定义设置 height: 60px;//根据文字高度...
  • js文字一行左右滚动

    2018-04-27 11:46:59
    JS jquery 文字一行多余隐藏,然后左右滚动 JS jquery 文字一行多余隐藏,然后左右滚动
  • 一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“…”的做法。 一般的文字截断(适用于内联与块): CSS== ...
  • 当css控制页面文字显示一行多余部分隐藏时,这样处理: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 当文字长度不确定,需要具体控制显示行数时: display: -webkit-box; overflow: ...
  • //一行显示 text-overflow: ellipsis;//是否显示省略号 } 好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容 如果是两行显示 overflow : ...
  • 显示的效果图 代码 <text class='intro_info'>{{item.introduction}}</text> /*设置text显示行数,多余的省略*/ .intro_info{ display: -webkit-box; -webkit-box-orient: vertical; -w...
  • <style> .ellipsis{width:100px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;} .ellipsis:hover{overflow: visible;} </style>...css隐藏多余文字并用...表...
  • 隐藏多余文字

    2020-02-06 17:44:04
    好几次做东西时都得去百度如何将文字隐藏起来并出现省略号 这次主要是介绍一下关于如何隐藏超过范围内的文字 overflow:hidden//当文本超出给定的范围时将内容隐藏 text-overflow它表示当文字溢出时是否显示省略号,...
  • /*只显示一行 多余的会为省略号 2行则改为2*/ -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; display: -webkit-box;
  • css隐藏多余文字

    2015-01-26 14:24:36
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;...以上css表示只显示一行文字,其余用省略号代替。 width:100px; height: 30px; overflow:hidden; 以上css表示显示多行文字,行数可由height控制
  • //超出隐藏 text-overflow: ellipsis;//超出文本设置为... display:-webkit-box;//将div1转换为盒子模型 -webkit-line-clamp: 2;//设置div1的文本为2 -webkit-box-orient: vertical;//从顶部向底部垂直布

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,426
精华内容 4,570
关键字:

文字一行显示多余隐藏