精华内容
下载资源
问答
  • 文字溢出显示省略号

    千次阅读 2019-05-27 08:57:35
    如果我们有时文字必须要在一行显示,文字的容器宽度已经确定(比如文章标题链接)字数太多的情况下难免会溢出,但是如何让使用者知道它是溢出了,不是缺失了呢,这...溢出显示省略号</title> <style ty...

    如果我们有时文字必须要在一行显示,文字的容器宽度已经确定(比如文章标题链接)字数太多的情况下难免会溢出,但是如何让使用者知道它是溢出了,不是缺失了呢,这时候省略号就有大作用了,那么如何设置呢?请看代码

    <head>
    		<meta charset="utf-8" />
    		<title>溢出显示省略号</title>
    		<style type="text/css">
    			div {
    				width: 200px;
    				height: 20px;
    				/*以下三句缺一不可*/
    				overflow: hidden;
    				white-space: nowrap;
    				text-overflow: ellipsis;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			这里的字太多了,不想换行显示,溢出之后想让人们知道后面还有内容
    		</div>
    	</body>

    显示的结果 就像下图一样

    让我们检验一下省略的文字是否存在,拿图说事

     

     

    展开全文
  • 场景: 在实际的项目开发个过程中,有时候文本内容不能全部显示出来,会影响到.../* 单行文字溢出显示省略号 */ .ellipsis_one{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 两行...

    场景:

    在实际的项目开发个过程中,有时候文本内容不能全部显示出来,会影响到页面的排版布局,这时就需要我们对文字做一个溢出处理。

    效果如下:

    示例效果图

    代码如下:

    /* 单行文字溢出显示省略号 */
    .ellipsis_one{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    /* 两行文字溢出显示省略号 */
    .wrap_more_two{
        overflow: hidden;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /*! autoprefixer: on */
        -webkit-line-clamp: 2;
    }
    
    /* 三行文字溢出显示省略号 */
    .wrap_more_three{
        overflow: hidden;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /*! autoprefixer: on */
        -webkit-line-clamp: 3;
    }

    示例页面 HTML:

    <body>
        <ul>
            <li><h4>单行文字溢出处理</h4>
                <p class="ellipsis_one">今天天气很好呀,而且马上就要过年啦,开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
            </li>
            <li><h4>多行文字溢出处理之 两行文字溢出</h4>
                <p class="wrap_more_two">今天天气很好呀,而且马上就要过年啦,开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
            <li><h4>多行文字溢出处理之 三行文字溢出</h4>
                <p class="wrap_more_three">今天天气很好呀,而且马上就要过年啦,开心。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></li>
        </ul>
    </body>

    以上就可以满足现今项目中的全部需求,希望可以帮到你。

     

    展开全文
  • jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
  • jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
  • 1.单行文字溢出显示省略号、  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号、  display:-webkit-box;  -webkit-box-orient:vertical;  -...

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

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;//文本不换行

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

      display: -webkit-box;

      -webkit-box-orient: vertical;

      -webkit-line-clamp: 3;//控制文本现实的行数

      overflow: hidden;

    转载于:https://www.cnblogs.com/lhw888888/p/9712521.html

    展开全文
  • 单行文字溢出时用省略号代替 1.overflow:hidden; 2.text-overflow:ellipsis; 3.-o-text-overflow:ellipsis; 4.white-space:nowrap;...//多行文字溢出显示省略号//请先引入jquery.jsfunction figcaption()

    单行文字溢出时用省略号代替

    1.overflow:hidden;
    2.text-overflow:ellipsis;
    3.-o-text-overflow:ellipsis;
    4.white-space:nowrap;
    5.width:100%;

    多行文字溢出是显示省略号css

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*你需要的行数*/
    -webkit-box-orient: vertical;


    多行文字溢出时用省略号代替函数


    <span style="font-family: Arial, Helvetica, sans-serif;">//多行文字溢出显示省略号</span>
    <span style="font-family: Arial, Helvetica, sans-serif;">//请先引入jquery.js</span>
    function figcaption(){
    $(".figcaption").each(function(i){
    	var divH = $(this).height();
    	var chdeq = $(this).children().eq(0);
    	var s = chdeq.text().toString();
    	var ws =s.length;
    	if( parseInt(chdeq.outerHeight()) > parseInt(divH) ){
    		for(var i=0; i<ws; i++){
    			chdeq.text(s.substring(0,i<4?s.length-i:s.length-4)+'...');
    			s = chdeq.text().toString();
    			if( parseInt(chdeq.outerHeight()) <= parseInt(divH) ){
    				break;
    			}
    		}
    	}
    });
    }



    展开全文
  • 溢出显示省略号的代码:其中 1 是行数。 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  • dotdotdot.js插件是一款基于jQuery实现的单行多行文本文字内容超出溢出部分显示省略号的代码。
  • 文件为jquery简单封装方法,需要先引入jquery,调用方法: $(function(){ $('.test').wordLimit(30) })
  • css实现列表各占一半文字溢出显示省略号 文档仅供个人参考使用 <div class="box"> <div> <p v-for="item in data" :key="item.id"> <label> <input type="radi...
  • 多行文字溢出显示省略号

    千次阅读 2015-07-17 14:23:12
    多行文字结尾显示省略号 由于本人是新手,许多东西对于我来说,都是挑战,特开通博客园来记载分享项目中遇到的各种问题,其中很多资料都是借鉴别人的,谢谢各位大神! 最近的项目主要依托于谷歌内核的一个...
  • 1、单行文字溢出显示省略号:style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" 部分浏览器还需要加宽度width属性 2、多行文字溢出显示省略号: WebKit浏览器或移动端的页面 ...
  • // 文字溢出显示省略号 no-wrap{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 在CSS中,通过text-overflow规定当文本溢出边界时的表现形式,ellipsis表示显示省略号。 但是很多新手试了不行,原因是单是这样设置没有触发溢出,单行显示的时候还要同时使用white-space: nowrap;限定文字不换行,...
  • 1、强制不换行,文字溢出显示省略号: { white-space: nowrap; //文本强制不合法 text-overflow:ellipsis; //文本溢出显示省略号 overflow:hidden; //溢出部分隐藏 } 2、图片自适应:针对PC端和手机端访问...
  • 1. 强制不换行 white-space: nowrap;... 文本溢出显示省略号; overflow:hidden; 溢出的部分隐藏; 2. 自动换行 word-wrap: break-word; word-break: normal; 3.强制英文单词断行 word-b...
  • 直接上代码: overflow: hidden white-space: nowrap -ms-text-overflow: ellipsis text-overflow: ellipsis
  • 设置文字超出显示省略号 overflow: hidden white-space: nowrap text-overflow: ellipsis 尝试设置min-width:0
  • 单行文本溢出显示省略号 <p class="content"> 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这是一个demo 这...
  • 昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用!...//显示省略号 } 然后查了查网上遇到的类似问题,用table-layout:fixed;可以解决此问题,但是我发现这个方法并不完美,...
  • 单行显示 width: 478rpx;定义宽度,超出宽度显示省略部分 overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis;... 到第几行开始显示省略号 -webkit-box
  • 来搞点css,这次讲溢出显示省略号的方法,它在实际场合是非常实用的所以,就像今天记下来。 前排提示,本人所有文档全部来源网络,通过自我实验得出的结果! 它有一套固定的公式 单行溢出 /* 关键代码 */ .demo { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,981
精华内容 4,392
关键字:

文字溢出显示省略号