精华内容
下载资源
问答
  • 众所周知,通过css设置文字强制不换行超出用省略号表示很简单: { white-space: nowrap; 文本强制不换行; text-overflow:ellipsis; 文本溢出显示省略号; overflow:hidden; 溢出的部分隐藏; } 但是如果要想...

    众所周知,通过css设置文字强制不换行超出用省略号表示很简单:

    {
        white-space: nowrap; 文本强制不换行;
        text-overflow:ellipsis; 文本溢出显示省略号;
        overflow:hidden; 溢出的部分隐藏;
    }

    但是如果要想显示两行,超出用省略号表示要怎么写呢?

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

    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
    常见结合属性:
    1,display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    2,-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    3,text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

    展开全文
  • Thinkphp内置了个可以媲美smarty的模板引擎,给我们带来了很的方便。调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用。 比如今天我们说的截取字符函数,在...

    Thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便。调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用。

    比如今天我们说的截取字符串函数,在thinkphp模板引擎里可以这样写:{$vo.title|msubstr=0,5,’utf-8′,false} 至于{$vo.title}这个大家肯定不陌生了。就说说后边的函数msubstr吧。它代表的意思是截取字符串$vo.title,从0个字符开始截取,截取5个字符。使用的是utf-8编码,默认截取后不显示省略号,如果要显示省略号,直接把false改成true就可以啦。

    函数解释:

    msubstr($str, $start=0, $length, $charset=”utf-8″, $suffix=true)

    • $str:要截取的字符串
    • $start=0:开始位置,默认从0开始
    • $length:截取长度
    • $charset=”utf-8″:字符编码,默认UTF-8
    • $suffix=true:是否在截取后的字符后面显示省略号,默认true显示,false为不显示

    ps:如果不能正常调用,那说明你没有加载函数库,可以使用 Load('extend');来加载函数,把它放到action中就可以啦~!

    经试用:官方的msubstr函数好像无论如何也加不上省略号,官网论坛上找了一个修改方法,经测试可以正常使用~!

    修改Commonextend.PHP文件的msubstr函数为如下代码即可:

    1. function msubstr($str, $start=0, $length, $charset="utf-8", $suffix=true)    
    2. {    
    3.     if(function_exists("mb_substr")){    
    4.         if($suffix)    
    5.              return mb_substr($str, $start, $length, $charset)."...";    
    6.         else   
    7.              return mb_substr($str, $start, $length, $charset);    
    8.     }    
    9.     elseif(function_exists('iconv_substr')) {    
    10.         if($suffix)    
    11.              return iconv_substr($str,$start,$length,$charset)."...";    
    12.         else   
    13.              return iconv_substr($str,$start,$length,$charset);    
    14.     }    
    15.     $re['utf-8']   = "/[x01-x7f]|[xc2-xdf][x80-xbf]|[xe0-xef][x80-xbf]{2}|[xf0-xff][x80-xbf]{3}/";    
    16.     $re['gb2312'] = "/[x01-x7f]|[xb0-xf7][xa0-xfe]/";    
    17.     $re['gbk']    = "/[x01-x7f]|[x81-xfe][x40-xfe]/";    
    18.     $re['big5']   = "/[x01-x7f]|[x81-xfe]([x40-x7e]|xa1-xfe])/";    
    19.     preg_match_all($re[$charset], $str, $match);    
    20.     $slice = join("",array_slice($match[0], $start, $length));    
    21.     if($suffix) return $slice."…";    
    22.     return $slice;  

    展开全文
  • 有时候我们会遇到这样的问题,字符写到TextView里面,根本写不下,但是该字符并不是固定的,所以我们不知道需要定多长的TextView 所以对于过长的字符我们最后以省略号代替。如下所示: TextView只显示...

    有时候我们会遇到这样的问题,一个大字符串写到TextView里面,根本写不下,但是该字符串并不是固定的,所以我们不知道需要定多长的TextView

    所以对于过长的字符串我们最后以省略号代替。如下所示:

    TextView只显示一行,并且对于超出TextView宽度的部分以省略号结束。

    <TextView android:layout_width="fill_parent" 

                       android:layout_height="wrap_content"

       android:id="@+id/HelloWorld" 

                       android:ellipsize="end"

                       android:singleLine="true" 

    />

    其实省略号不只可以放在结尾部分,也可以放在前面,中间等,如下:

            android:ellipsize="start"        省略号在开头        

            android:ellipsize="middle"       省略号在中间        

            android:ellipsize="end"          省略号在结尾        

            android:ellipsize="marquee"      跑马灯显示


    2016.5.29 北京 炎热的午后~太阳光很强烈

    展开全文
  • HTML多行省略号

    2020-01-03 09:40:03
    有时候我们需要两行或者多行,超出就用省略号代替,之前是通过后端截取字符长度来控制,但字符中空格、数字、中文、英文小写,字体的宽度都不同的,导致界面上有长有短。 下面代码还存在个问题,元素里有...

    css只能设置单行超出用省略号表示

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

    有时候我们需要两行或者多行,超出就用省略号代替,之前是通过后端截取字符串长度来控制,但字符串中空格、数字、中文、英文大小写,字体的宽度都不同的,导致界面上有长有短。

    下面代码还存在一个问题,元素里有标签时没提取出来,这个需要遍历元素的childNodes,以后有机会再完善

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ellipsis</title>
        <style>
            #test {
                width:100px;
                background:lawngreen;
            }
            .test-box {
                width: 210px;
                background-color: red;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div id="test">
            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
        </div>
        <div class="test-box">
            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
        </div>
        <div class="test-box">
            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
        </div>
        <div class="test-box">
            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
        </div>
        <div class="test-box">
            Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。
        </div>
        <script>
            class Ellipsis {
                offsetElement = document.createElement('span');
                allWidth = 0;
                break = 0;
                constructor(el, pramas) {
                    this.offsetElement.style.opacity = 0;
                    document.getElementsByTagName('body')[0].appendChild(this.offsetElement);
                    this.pramas = pramas || {break:0};
                    if(el.length > 0){
                        for(let i = 0,le = el.length; i < le; i++ ){
                            this.computerWidth(el[i]);
                        }
                    } else {
                        this.computerWidth(el);
                    }
                    this.offsetElement.parentNode.removeChild(this.offsetElement);
                }
                computerWidth(el) {
                    let maxWidth = el.offsetWidth;
                    let textArr = el.innerText.split('');
                    let fontSize = window.getComputedStyle(el).fontSize;
                    let str = '';
                    let htmlStr = '';
                    this.offsetElement.style.fontSize = fontSize;
                    for(let i = 0,le = textArr.length; i < le; i++) {
                        let text = textArr[i];
                        htmlStr += text;
                        this.offsetElement.innerHTML = htmlStr;
                        if(this.offsetElement.offsetWidth >= maxWidth){
                            this.break++;
                            if(this.break >= this.pramas.break) {
                                htmlStr += '...';
                                break;
                            }
                            if(this.offsetElement.offsetWidth > maxWidth){
                                i--;
                                htmlStr = htmlStr.slice(0,htmlStr.length - 1)
                            }
                            str += htmlStr;
                            htmlStr = '';
                        }
                    }
                    el.innerHTML = str + `<ellipsis-html 
                        style="
                            display:block;
                            width: 100%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">${htmlStr}</ellipsis-html>`;
                    this.offsetElement.innerText = '';
                    this.allWidth = 0;
                    this.break = 0;
                }
            }
            new Ellipsis(document.getElementById('test'),{break:2})
            new Ellipsis(document.getElementsByClassName('test-box'),{break:3})
        </script>
    </body>
    </html>

     

     

    展开全文
  • 在显示数据时,字符过长将截取一定长度的字符然后加个省略号显示,可字母和汉字,小写字母在显示时虽然length一样可显示的长度却不一样,有什么办法可以解决截取的字符在实际显示时都是一样的呢?...
  • 为了给用户个好的体验,往往策划会提出要求,比如角色名最大长度为18位,但是12位就已经超出框框,那么可以只显示9位,剩余部分用省略号替换,这样整个角色名就在给定框当中,给玩家的体验效果
  • 用JS 控制实现两行文字多出部分展示省略号(兼容谷歌 IE等各浏览器) 先说一下思路,控制好外部DIV的宽度,然后自行计算要展示几行的height,(someHeight),判断是否高于想要的高度,如果大于想要的高度,就...
  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]left():截取个字符的前部分 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]3,主要程序:判断内容长度是否大于给定值,据结果做相应操作 [Ctrl+A 全选 注:如...
  • 文字的多行处理在dom元素中很好办。但是canvas中没有提供方法,只有通过...//处理文字多出省略号显示 dealWords: function (options) { options.ctx.setFontSize(options.fontSize);//设置字体大小 var allRow = Ma
  • 个QLabel不可能显示无限长的字符啊,这时候我们可以考虑,如果字符长度太长的时候,我们就显示其中的部分,剩下的用…显示。 比如说我们要显示“1234567890abcdefghijklmnopqrstuvwxyz”,能不能显示成...
  • 作为个程序员,经常需要面对的个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。 众所周知,有很多方法可以实现这个功能,...
  • 粗想一下,实现这个功能很容易,直接取字符的长度(用length()方法),如果超出,就用substring()方法截取段,然后再在结尾处加上省略号。但实际上这样做是不行的,至少说是某种程度上得不到我们想要的结果,因为...
  • 求大神问题修正:textview设定最大行数为1后,文本超出了textview,textView末尾显示省略号,我就想知道省略号代表的内容回答假设TextView的宽度是在xml内设置的具体数值,比如300dp,(目的是为了简化这个问题,如果...
  • 枚举选项包括:可保留完整单词,允许最后个单词超过最大长度限制,字符最后跟省略号以及不采取任何操作等,具体示例实现代码如下: using System; using System.Collections.Generic; using System....
  • 截取字符(AS3)

    2013-07-20 10:06:39
    面对个比较长的字符,如果个文本显示不全,最常见的处理方式就是后面的用省略号代替,部分文本组件也都提供这样的功能了,可是现在却要把中间的部分用省略号代替,保留左右2边的完整性.献丑了!有什么可以给我留言...
  • 前半部分是确定个数、确定类型的参数,第二部分就是省略号,代表数目和类型都不确定的参数表,省略号参数表中参数的个数和参数的类型是事先的约定计算出来的,每个实参的地址(指针)是根据确定参数表中最后个实参...
  • 在写爬虫爬网页的时候,经常需要爬取里面的一大块代码,比如: <div>..................................</div></div></div></div> 我们需要省略号里面的代码块,如果我们用"*"、...
  • 将字符长度进行剪切

    热门讨论 2016-06-05 20:25:17
    在网页上我们经常会看到在列表栏里,有的标题或文章只显示行后面会用省略号代替,即实现下图的效果: 将字符截取指定长度后,用自定义的符号显示代表剩余内容: /// /// 将指定字符按长度进行剪切 ///...

空空如也

空空如也

1 2 3 4 5 6
收藏数 117
精华内容 46
关键字:

一大串省略号