精华内容
下载资源
问答
  • CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
  • 单行显示 width: 478rpx;定义宽度,超出宽度显示省略部分 overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis;... 到第几行开始显示省略号 -webkit-box

    单行显示

     

    width: 478rpx;定义宽度,超出宽度显示省略部分
    overflow: hidden;  /*超出部分隐藏*/
    white-space: nowrap;  /*禁止换行*/
    text-overflow: ellipsis; /*省略号*/

    多行显示

     overflow : hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2; 到第几行开始显示省略号
     -webkit-box-orient: vertical;
     width: 534rpx; 定义宽度




     

     

     

     

    展开全文
  • 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
  • 需求: ie下多行文本超出隐藏显示省略号 解决方案:float布局 代码: html: <div class="fix-height"> <div class="text">这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字...

    需求: ie下多行文本超出隐藏显示省略号 

    解决方案:float布局

    代码:

    html:

    <div class="fix-height">
            <div class="text">这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很        长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长</div>
    </div>

     css:

        .height-fixed {
          height: 40px;
          overflow: hidden;
          line-height: 20px;
        }
        .height-fixed .text {
          float: right;
          width: 100%;
          margin-left: -5px;
          word-break: break-all;
        }
        .height-fixed::before {
          float: left;
          width: 5px;
          content: "";
          height: 100%;
        }
        .height-fixed::after {
          float: right;
          content: "...";
          height: 20px;
          line-height: 20px;
          width: 16px;
          /* 40 = 省略号长度 + padding-left长度 */
          margin-left: -40px;
          padding-left: 24px;
          /* 真实长度 小于等于5 */
          padding-right: 5px;
          position: relative;
          left: 100%;
          top: -20px;
          background: -webkit-linear-gradient(left, transparent, #fff 50%);
          background: -o-linear-gradient(right, transparent, #fff 50%);
          background: -moz-linear-gradient(right, transparent, #fff 50%);
          background: linear-gradient(to right, transparent, #fff 50%);
        }

    效果:

    布局原理:

    基本图  文本区域未超出固定高度时:

    基本图  文本区域超出固定高度时:

     

     代码:

    <div style="width: 400px; height: 200px; background-color: azure">
          <div style="float: left; width: 100px; height: 200px; background-color: aqua">左侧悬浮框 高度等于外层高度</div>
          <div style="float: right; width: 100%; margin-left: -100px; border: 2px dashed blue; padding-left: 100px; box-sizing: border-box">
            float:right width: 100% margin-left: -100px;
            <br />
            蓝色虚线框 - 文本主体右侧悬浮,通过margin-left: -100px;使其和左侧悬浮框同起点
            <br />
            下方省略号宽度需低于左侧悬浮框以保证文本主题超出后能定位到左侧悬浮框下方
            下方省略号宽度需低于左侧悬浮框以保证文本主题超出后能定位到左侧悬浮框下方
            下方省略号宽度需低于左侧悬浮框以保证文本主题超出后能定位到左侧悬浮框下方
          </div>
          <div style="float: right; height: 50px; width: 100px; background-color: aquamarine" class="ellipsis-div">省略号</div>
        </div>

    现在我们的目标是在文本溢出时将省略号放在文本块右下方,未溢出时不显示省略号。

    添加ellipsis-div类:

        .ellipsis-div{
            position: relative;
            left: 100%;
            /* 20为line-height高度 */
            top: -20px;
            /* margin-left 的值与padding-right对应 防止布局出错 */
            margin-left: -100px;
            /* padding-right使当前块向左移到text块 */
            padding-right: 100px;
        }

    文本区域未超出固定高度时:

     文本区域超出固定高度时:

    细节调整下即可达到效果。

    上面是高度固定下多行溢出,下面添加一些属性来达到高度自适应。

    本来以为直接用max-height即可,天真了,有最小最大高度的父盒子-其下子盒子无法继承父盒子的高度。解决方式在外层加flex层。

        <div style="display: flex">
          <div class="height-fixed">
            <div class="text">
              这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长
              这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长
            </div>
          </div>
        </div>

    然后将内部height改为max-height即可。

    展开全文
  • 今天怂怂就为大家分享一篇通过css样式使文本在一行内显示,超出则加省略号的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随怂怂过来看看吧 超出隐藏(overflow:hidden;) 强制在同一行显示(white-...

    今天怂怂就为大家分享一篇通过css样式使文本在一行内显示,超出则加省略号的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随怂怂过来看看吧

    超出隐藏(overflow:hidden;)

    强制在同一行显示(white-space: nowrap;)

    省略号(text-overflow:ellipsis;)

    直接放代码:代码三连击!

    style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis";

     ps:

    white-space属性

    定义:white-space 属性设置如何处理元素内的空白。·

    实例:规定段落中的文本不进行换行:就是说在一行显示。

    p{ white-space: nowrap;}
    描述
    nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

     

    展开全文
  • 1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; ...

    1、单行文本溢出显示省略号

    单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可。

    	<style>
    	.single-line {
    	  width: 200px;
    	  line-height: 1.4;
    	  white-space: nowrap;
    	  overflow: hidden;
    	  text-overflow: ellipsis;
    	}
    	</style>
        
        <div class="single-line">
          士为知己者死。
    	</div>
    	<div class="single-line">
          世上本没有路,走的人多了,也便成了路。
    	</div>


    2、多行文本溢出显示省略号

    实现的思路是先设置外层容器,限定要显示的高度。实际显示内容放到内层元素上。
    1)接下来添加省略号,基于外层容器设置为绝对定位,显示在外层容器右下角。这样显示区域右下角会存在省略号。
    2)添加和省略号大小一样的空白区域,基于内层元素设置为决定定位,显示在实际内容右下角。当内容未溢出时,空白会覆盖省略号。
    3)前面设置完后,内容刚好能放下时,外层容器右侧会出现一小块空白。
        在内容元素内部后面加上一个和省略号一个大小的空白区域。这样当内容刚好能容下时,这个空白区域会被推倒下一行,2)中的空白区域也会向下移一行,省略号得以保留。

    	<style>
    	.multiple-line-wrapper, .multiple-line, .multiple-line .empty-space {
    	  display: inline-block;
    	}
    	.multiple-line-wrapper {
    	  display: inline-block;
    	  line-height: 1.4em;
    	  max-height: 2.6em; /* 1.4em * (N - 1) + 1em + (0.4em / 2)。N为要显示的行数,1.4em为行高 */
    	  position: relative;
    	  overflow: hidden;
    	  width: 200px;
    	}
    	
    	
    	 /*
    	 ==》存在小问题:
    	 1、刚好能显示下时会显示省略号
    	 2、省略号和文字交接的地方存在有一根亮黄的线
        */
    	.multiple-line-wrapper:after, .multiple-line:after {
    	  position: absolute;
    	  right: 0;
    	  bottom: 0;
    	  display: inline-block;
    	  width: 1em;
    	  height: 1.4em;
    	  background: white;
    	}
    	.multiple-line-wrapper:after {
    	  content: '...'; 
    	}
    	.multiple-line {
    	  position: relative;
    	}
    	 /*设置和省略号宽度一样。*/
    	.multiple-line .empty-space {
    	  width: 1em;
    	}
    	 /*要比外层的层级来得大*/
    	.multiple-line:after { 
    	  content:'  ';
    	  z-index: 10;
    	}
        </style>
    	<span class="multiple-line-wrapper">
    	  <span class="multiple-line">
    	   志向不过是记忆的奴隶,生气勃勃地降生。
    	   <span class="empty-space"></span>
    	  </span>
        </span>
    	<br/>
    	
        <span class="multiple-line-wrapper">
    	  <span class="multiple-line">
    	   志向不过是记忆的奴隶,生气勃勃地降生。但却很难。
    	   <span class="empty-space"></span>
    	  </span>
        </span>
    	<br/>
    	
        <span class="multiple-line-wrapper">
    	  <span class="multiple-line">
    	   志向不过是记忆的奴隶,生气勃勃地降生,但却很难成长。
    	   <span class="empty-space"></span>
    	  </span>
        </span>
    	<br/>

     

    实际运行效果大致所示:
    1)未溢出时实际效果如下,没有显示省略号。因为空白块覆盖了省略号。

    2)刚刚好能显示时,实际效果如下,右下角有省略号。因为外部容器的绝对定位空白块被推到了下一行

    3)溢出时,实际效果如下,右下角有省略号。

    这个方案虽然能够解决,但是也存在一些小问题:
     1)刚好能显示下时会显示省略号
     2)省略号和文字交接的地方存在有一根亮黄的线
     3)不能给外部容器.multiple-line-wrapper和内部元素.multiple-line设置padding。如果需要padding值,可以在.multiple-line-wrapper外部再嵌套元素,在嵌套元素上设置。或者用margin替代

    展开全文
  • 主要介绍了微信小程序实现多行文字 超出部分省略号显示功能,比如设置只显示2行,超出部分省略号显示,本文通过实例代码给大家介绍,需要的朋友可以参考下
  • /*单行溢出,显示省略号,用text-overflow属性,需要增加宽度*/ /*溢出隐藏*/ overflow: hidden; /*隐藏的部分用...表示*/ text-overflow: ellipsis; /*文字不能转行*/ white-space: nowrap; width: 244px; ...
  • 多行文字溢出显示省略号

    千次阅读 2015-07-17 14:23:12
    多行文字结尾显示省略号 由于本人是新手,许多东西对于我来说,都是挑战,特开通博客园来记载分享项目中遇到的各种问题,其中很多资料都是借鉴别人的,谢谢各位大神! 最近的项目主要依托于谷歌内核的一个...
  • 段落文字太多显示不下时,可通过下面的样式解决 下面就是解决的示例
  • 单行文字溢出时用省略号代替 1.overflow:hidden; 2.text-overflow:ellipsis; 3.-o-text-overflow:ellipsis; 4.white-space:nowrap;...//多行文字溢出显示省略号//请先引入jquery.jsfunction figcaption()
  • 单行溢出显示省略号多行文本溢出显示省略号
  • 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时...大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
  • 文章目录一、溢出属性(overflow)二、空余空间(white-space)三、省略号显示(text-overflow)三、单行文本溢出时显示省略号四、多行文本溢出时显示省略号总结 一、溢出属性(overflow) overflow:visible/hidden...
  • 这个问题,其实问题不大,但是解决了一会,主要原因有2个: 1、一开始考虑使用单行超出省略号的方式来做: ... 先不换行,然后超出隐藏,超出隐藏显示省略号 } 这是单行文本的方式,一开始想着加...
  • 只要用过css配合title即可 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  • 一、css常规方法: (一)、单行文本 p{ width:100px; overflow: hidden; /*超出部分隐藏*/ ... /*省略号*/ } (二)、多行文本 1、在WebKit浏览器或移动端 在WebKit浏览器或移动端(绝大部分是...
  • text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。 -webkit-line-clamp : number用于显示的行数 -webkit-box-orient 默认是水平的,当值设为vertical时为垂直排列 css { ...
  • css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容) <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <...
  • 实现多行文本溢出显示省略号的两种方法 ok,这是本菇凉的第一篇博客( •̀ ω •́ )✧ 刚毕业涉世未深的小女孩在如今这个信息爆炸的时代,看到行业那么多“大牛”、大神“、“大佬”等大大们,可以说是相(瑟)当...
  • 1、单行文字溢出显示省略号:style="overflow: ...2、多行文字溢出显示省略号: WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可
  • CSS 中多行文字溢出显示省略号

    千次阅读 2019-03-08 16:26:23
    HTML如下: 入门.一本全世界无数人受益和家庭必备的心 理自助图书,教你远离生活压力带来的焦虑. 入门.... /* 几行后显示省略号 */ -webkit-line-clamp: 3; -webkit-box-orient: vertical; } 最终效果
  • 文字溢出隐藏问题
  • /***** 设置几行出现省略点 ... 根据line-height *****/  line-height: 25px;  margin: 10px; } .ellipsis:before {  content:"";  float: left;  width: 5px;  height: 50px;/***** 跟ellipsis height 一样 *...
  • p{ position:releative; } p:after{ position:absolute; right:0; bottom:0; content:"..."; background:white; display:inline...
  • css多行文本溢出显示省略号及延伸

    千次阅读 2017-05-15 19:35:50
    前言如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 实现方式如下:display: -web
  • 4种方法实现单行、多行——文本溢出显示省略号一、单行溢出在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码:显示效果:二、那么多...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,672
精华内容 1,468
关键字:

多行文字溢出显示省略号