精华内容
下载资源
问答
  • css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容) <template> <div> <!--单行文本溢出 --> <h2>单行文本溢出</h2> <div class="box1"> <...

    css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容)

    <template>
      <div>
        <!--单行文本溢出  -->
        <h2>单行文本溢出</h2>
        <div class="box1">
          <ul>
            <li title="全部内容展示:文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1">
              文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1
            </li>   
          </ul>
        </div>
    
        <!-- 多行文本溢出 -->
        <h2>多行文本溢出</h2>
        <div class="box2">
          <ul>
            <li title="全部内容展示: 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2">
              文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2
            </li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style>
    .box1 ul {
      width: 200px;
    }
    
    .box1 ul li {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    .box2 ul {
      width: 200px;
    }
    
    .box2 ul li {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
    </style>
    

    在这里插入图片描述

    展开全文
  • css单行文本溢出显示省略号 1.css .text { overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-...

    css单行文本溢出显示省略号

    1.css

    .text {
    				overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: normal;
    				display: -webkit-box;
    				-webkit-box-orient: vertical;
    				-webkit-line-clamp: 1;
    			}

    2.html

    <div class="text">requirejs能带来什么好处requirejs能带来什么好处requirejs能带来什么好处</div>

    效果:

    展开全文
  • CSS 单行文本溢出追加省略号

    样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:

    <span style="font-family:Microsoft YaHei;font-size:12px;">.box {
    	width: 200px;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }</span>

    示例1:

    <span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>text overflow ellipsis</title>
    	<style>
    		.box {
    			width: 200px;
    			white-space: nowrap;
    			overflow: hidden;
    			text-overflow: ellipsis;
    		}
    	</style>
    </head>
    <body>
    <h1>text overflow ellipsis</h1>
    
    <div class="box">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
    </body>
    </html></span>
    参考:http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html

    展开全文
  • <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?...单行文本溢出隐藏很简单了 ov..
    <div class="ellipsis">英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?
    英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?英语阅读看不懂?</div>

     单行文本溢出隐藏很简单了

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

     多行文本溢出隐藏有两种方式

     第一种方式:

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    第二种方式: 

    这里主要来说一下第二种方式

    实现思路:

    1. 首先给容器设置宽度,纵向溢出隐藏 ( overflow-y : hidden )

    2. 然后容器文本需要一个行高

    3. 容器的高度等于( 显示的行数 * 行高 )

    4. 容器设置相对定位

    5. 使用伪元素添加省略号

    6. 绝对定位,相对于容器,定位在右下角

    7. 伪元素设置 宽度 为 1个字体大小+2px 的间隙(以防旁边文字露出)

    8. 高度为一个字体大小

    9. 设置背景色覆盖住最后一个文字

    10. 当然也可以设置color给省略号设置颜色

    .ellipsis{
        width:300px;
        height:60px;
        border:1px solid #222;
        overflow-y:hidden;
        position:relative;
        line-height:20px;
    }
    .ellipsis::after{
        content:'...';
        position:absolute;
        right:0;
        bottom:0;
        width:calc(1em + 2px);
        height:1em;
        background:#fff;
        line-height:1em;
        color:red;
    }

     

    展开全文
  • 单行文本溢出显示省略号 必备条件 1、必须是单行文本 2、文本容器是有限宽度:p { width:100px } 3、禁止换行:white- space:nowrap; 4、隐藏超出文本:overflow:hidden; 5、添加省略符号:text- overflow:...
  • 可以设置文本溢出显示省略号 ~~~ .wrap{ width: 200px; // 文字容器宽度 overflow: hidden; // 超出边框外隐藏 text-overflow:ellipsis; // 属性规定当文本溢出包含元素时发生的事情。 white-space: nowrap; /...
  • 1.单行文本溢出显示省略号 @mixin no-wrap() {  overflow: hidden;  -ms-text-overflow: ellipsis;  text-overflow: ellipsis;  white-space: nowrap; } 2.多行文本溢出显示省略号 @mixin ...
  • <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...CSS单行文字溢出省略号表示</title> <style> ...
  • 此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄...文本溢出显示省略号...
  • overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
  • 这时候我们想要只显示一部分文字,将多余部分以省略号 “...” 的形式显示。那么我们可以通过设置 CSS 样式来达到目的。 代码示例: HTML <div class="truncate"> Lorem ipsum dolor sit amet...
  • 文章目录CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二种效果:仅显示3行文本溢出部分显示省略号,并且鼠标上浮显示...
  • css单行 多行文本溢出显示省略号 /* css 实现单行文本溢出显示省略号 */ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /* css 实现多行文本溢出显示省略号 */ display: -webkit-box; -webkit...
  • 单行文本 省略需要用到 text-overflow 属性 .one-line{ width: 100%; /* 宽度固定,高度只有一行,不能换行就进行下一步省略了 */ overflow: hidden; /* 必须超出修剪 */ white-space: nowrap; /* 确保文字不...
  • CSS3文本溢出省略号

    2019-01-14 17:50:34
    单行文本溢出省略号: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本溢出显示省略号: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...
  • 文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号 多行语法(只有-webkit内核才有作用) 示例 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit...
  • a、单行文本显示省略号: text-overflow:ellipsis 溢出内容被裁减,显示省略号/clip溢出内容被裁减,不显示省略号 b、省略号设置: text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性...
  • /*多行文本溢出省略号代替*/ .test { width: 10px; display: -webkit-box; -webkit-box-orient: vertical; /*设置其模式*/ -webkit-line-clamp:2; /*设置行数*/ overflow: hidden; text-overflow: ...
  • 单行文本溢出显示省略号 /*单行文本溢出显示省略号的相关代码如下:*/ /*1.先强制一行内显示文本*/ white-space: nowrap; /*默认值是normal,自动换行*/ /*2.超出部分隐藏*/ overflow: hidden; /*3.文字超出部分用...
  • 不写博客吧,面试会问到,工作不好找,写吧,参考这个比较全的 http://www.css88.com/archives/5206 转载于:https://www.cnblogs.com/heboliufengjie/p/5485967.html

空空如也

空空如也

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

css单行文本溢出省略号