精华内容
下载资源
问答
  • div限制字数

    千次阅读 2012-11-29 16:12:12
    Div限制字数 div可以限制宽度,超出部分用省略号   div.wid{  width:200px;  white-space:nowrap;  text-overflow:ellipsis;  -o-text-overflow:ellipsis;  overflow: hidden;  }    ...

    Div限制字数

    div可以限制宽度,超出部分用省略号

    <style> 

    div.wid{

        width:200px;

        white-space:nowrap;

        text-overflow:ellipsis;

        -o-text-overflow:ellipsis;

        overflow: hidden;

     

     </style> 

     <div class="wid">这是很长的一段文字,这是很长的一段文字,这是很长的一段文字</div>

    但这种做法无法做到两行后,超出部分用省略号。
    后来换种思路,既然不能在css里面设置,就在文字里面截取字符,然后加上“…”
    我是用struts标签做的(需要导入标签库:<%@ taglib prefix="s" uri="/struts-tags"%>

    <s:if test="detail.length() > 20">

    <s:property value="detail.substring(0, 20)" />...

    </s:if>

    <s:else>

    <s:property value="detail" />...

    </s:else>

    展开全文
  • 这需求看上去不怎么复杂,看起来可以用css做(写css写魔怔了,啥都想往这上面靠拢),那先搜一下,字还没打完,就有提示“css限制显示字数,文字长度超出部分用省略号表示”,哎哟我c,这下不就简单了吗?接受挑战于是...

    提需求的来了

    kh2jhnyu55q.jpg

    某一期产品迭代时,新增了一个小功能,即:在单元格中的文本内容,字符超过20个字的时候,需要截断,并显示20个字符+一个省略号,未超过,无视。

    这需求看上去不怎么复杂,看起来可以用css做(写css写魔怔了,啥都想往这上面靠拢),那先搜一下,字还没打完,就有提示“css限制显示字数,文字长度超出部分用省略号表示”,哎哟我c,这下不就简单了吗?

    ypofxozso1t.jpg

    接受挑战

    于是按照其他人的解决方案,对单元格样式增加了如下内容:

    /* td的上级和同级标签都用element表示 */

    element element>td {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    }

    01gqthcxzpx.jpg

    姓名

    爱好

    个人介绍

    君子

    音乐

    我是一个君子,所谓窈窕淑女,我所欲也,怎样,姑娘加个微信可好?

    贪婪

    数钱

    我是七宗罪中的贪婪,但好像我有点不太对劲,因为贪婪不应该只是对钱吧?

    可以在这个表格上尝试,但是由于这个是markdown生成的表格,所以有些样式需要自己去改一下,下面的图片是我在w3cSchool中随便找了个表格改的样式。

    搞定收工,看下结果准备收拾东西回家……

    yo3zmprahhe.png

    但是,这单元格怎么高度不对啊,而且显示的内容也不对。

    3e0vyr1j3xw.jpg

    我陷入了沉思……

    于是在浏览器中的控制台增增减减以下几项内容:text-overflow,overflow,width,height,max-xxx,padding,margin……

    但是发现木啥用,再度陷入沉思。

    这时候我又回头看那些博客记录的内容,发现清一色都是用的p标签,没有用到其他的标签,想了想,也许是这个问题?于是换成了p标签,然后加上上述代码(以及一个margin:0),发现显示的确实成功截断并显示内容了。

    zehmdbt04ec.png

    这里注意,如果td中增加的是一个div标签,那么也不能够显示预期结果,如果对其增加一个属性white-space: nowrap;消去换行,以单行形式显示,那么也可以实现字符截断。

    但是这时候又发现了一个问题,截断的长度貌似不好控制,如果仅仅只是汉字,那么可以用width: 20em或者width: 10em(两行显示),但显然,在使用英文的时候,这个属性就不可用了。

    bpnz2iuyht5.jpg

    于是换一种思路。

    后文以angular框架为例来讨论这个问题

    文本字符数>=20的时候截断并显示对吧?那这个文本是哪里来的?

    响应式嘛,那肯定是有绑定数据的。你说直接写在标签中的文本你怎么改?拿头改……不对,这种情况不就是DOM操作嘛,可以用原生js或者jQuery来完成,但在一个框架中使用原生js有时候就是在舍近求远(不是舍本逐末,js才是本)

    {{ label }}

    {{ item | clip }}

    @Pipe({ 'name': 'clip'})

    export class clipPipe implements PipeTransform {

    transform(val: string) {

    if (val > 20) return val.slice(0, 20) + '...';

    return val;

    }

    }

    通过管道的方式,我们可以直接输出截断后的数据,当然也有其他方式,但是我也没有想到其他比较好的方法。

    如果你有好的方法,可以留言评论,我尝试一下,嘿嘿

    miblqfn2z3p.png

    总结

    有时候我们考虑问题的时候会陷入牛角尖,觉得只能从某个方向解决。

    这时候可以先把问题放一下,看看窗外的风景,或者发会呆,平复一下心情,然后再去思考有没有其他的方式去解决我手上的这个问题。

    发散思维嘛。

    展开全文
  • div可以限制宽度,超出部分用省略号 <style> div.wid{ width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } </style> .....

    div可以限制宽度,超出部分用省略号

     <style>  
    div.wid{ 
        width:200px;
        white-space:nowrap;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        overflow: hidden;
     }  
     </style>  
     <div class="wid">这是很长的一段文字,这是很长的一段文字,这是很长的一段文字</div>

    但这种做法无法做到两行后,超出部分用省略号。

    后来换种思路,既然不能在css里面设置,就在文字里面截取字符,然后加上“...”

    我是用struts标签做的

    <s:if test="detail.length() > 20">
    <s:property value="detail.substring(0, 20)" />...
    </s:if>
    <s:else>
    <s:property value="detail" />...
    </s:else>

    一开始还不知道struts标签可以用java语法。试了一下,还真可以,完成任务还得到意外收获,开心.O(∩_∩)O~~

    转载于:https://www.cnblogs.com/ljmin/archive/2012/07/23/2605611.html

    展开全文
  • 1.如果想要在一行里实现...注意:这里实现的是“超出长度”,而不是“超出字数”,并且在一行里实现。 2.如果是两行或者三行的容器,想要纯用css实现这个方法,是没办法做到的。 则需要用用js判断字数截取。...

    1.如果想要在一行里实现“超出长度显示省略号”

    只需要加上简单的css样式即可:

    {overflowhidden;white-spacenowrap;text-overflow:ellipsis;}

    注意:这里实现的是“超出长度”,而不是“超出字数”,并且在一行里实现。

     

    2.如果是两行或者三行的容器,想要纯用css实现这个方法,是没办法做到的。

    则需要用用js判断字数截取。

    <script>
        // 用id获取对象
        var introduction_solid = document.getElementById('introduction_solid');
        // slice() 方法可从已有的数组中返回选定的元素。
        // 此处需要根据需求自行修改slice()的值,以达到要显示的内容
        var demoHtml = introduction_solid.innerHTML.slice(0,105)+'...';
        // 填充至指定位置
        introduction_solid.innerHTML = demoHtml;
    </script>

     

    展开全文
  • <div class="center_division"> <div class="center_body"> 标题 内容 --%> ; font-size: 14px;"> <a href="#"><s:property value="#request['articleTitle']"/> ...
  • 有一个用div标签实现的编辑框,要求输入的内容长度不超过300。怎么做才能实现类似maxlength的限制效果,输入的字数超过300后,不会显示,输入无效。求大神指点!
  • div实现高度自适应并限制输入字数

    千次阅读 2017-07-28 12:07:05
    div模拟textarea实现高度随着内容自适应,并用js限制输入字数一、jQuery版<!doctype html> , initial-scale=1"> <title>collap
  • <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .main { position: relative; ...
  • 需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,...使用div模拟textarea文本框,输入文字高度自适应,且实现字数统计和限制,输入字数超...
  • textarea限制字数

    2017-08-24 18:57:29
    textarea限制字数html代码:<div> ;resize : none;" rows="5" cols="65" id="textArea" > <div style="margin: -30px 420px;"><span id="text-count" style="color:red">20
  • HTML中限制字数显示

    千次阅读 2020-01-04 18:46:01
    HTML中限制字数显示,超出部分使用省略号显示 在HTML中,为了保证页面整洁,需要隐藏超出部分的文本,例如列表项、标题等。如下为几种解决方法: 代码实现 文字只允许显示一行,省略超出部分,显示“…” 在CSS文件...
  • css限制字数,超出部分显示点点点的实现方法使用css限制字数的显示,主要使用width宽度来设置,超出的部分显示点点点,主要通过设置text-overflow属性来实现。下面小编举例讲解实现的过程。新建一个html文件,命名为...
  • 主要介绍了关于JavaScript限制字数的输入框在项目过程中容易遇到的各种坑的汇总,非常的详细,有需要的小伙伴可以参考下
  • overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical;...注意不要设置该div的高度,且div的position属性 不为flex 参考:https://zhidao.baidu.com/question/45438...
  • 原来是这样:字数多的话会换行,但是这是一个新闻发布的标题啊~~ 所以加上样式: width: 400px; //宽度固定 overflow: hidden; //超出部分隐藏 text-overflow: ellipsis; //用省略号 white-space: ...
  • 在输入框输入内容,当需要限制字数的时候,如果是Input或者textarea,可以直接用maxlength进行字数的限制。如果是用div(添加了contenteditable属性),如果直接用input事件进行字数的限制,则会出现临界问题。 问题...
  • 就是总会需要有限制字数的时候,那么除了使用maxlength属性外,还可以怎么做呢 html <div class="textarea_box"> <!-- <textarea name="send_info" cols="10" rows="4" placeholder="输入想要对她说的...
  • textarea限制字数,并在右下角实时显示总字数和已写字数, 已写字数包括:从键盘录入,或者从数据库获取的默认可编辑的文字
  • vue输入框字数限制,动态显示字数

    千次阅读 2020-08-28 11:48:45
    vue实时限制字数输入: <divclass="rejectedPoPMain"> <divclass="rejectedPoPMainCenter"> <divclass="instructionsLeft">说明:</div> <divclass="instructionsRight"> <...
  • 此方式存在问题:复制粘贴依然无法限制输入超限制后会失焦,但input框不会Documentdiv {width: 300px;height: 300px;background-color: blanchedalmond;border: 1px salmon solid;}const editDiv = document.query...
  • 输入框限制字数数量

    2019-09-02 09:21:42
    div class="srk"> <input type="text" placeholder='请输入问题' id="wby0" data-max='100' maxLength='100' onkeyup="wby(0)" /> <div class="tishiNum"><span id='titleNum'>0</spa...
  • text文本框限制文本框字数,当text文本框内文字字数超出限制字数时,自动提示文字,已超出限制文字字数 2、实现原理 先定义好限制字数,然后获得在input里面输入的字数,在将限制的字数减去当前的数字就剩下...

空空如也

空空如也

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

div限制字数