限定高度和宽度,折叠且省略号...显示文本

Jake443403168 2014-01-09 09:38:51
text为123456789123456789
比如限定高度最多3行,宽度为5个字符,不能完整显示,那么期望的结果是
12345
67891
23...

比如限定高度最多3行,宽度为10个字符,能完整显示,那么期望的结果是
1234567891
23456789


有没有好的解决方法和思路?
...全文
181 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Jake443403168 2014-01-09
  • 打赏
  • 举报
回复
引用 5 楼 imi233 的回复:
一定要用text么?如果不是的话可以用textarea。可以限定行数和列数。
编辑状态的editor可以用你说的textarea来限定
Jake443403168 2014-01-09
  • 打赏
  • 举报
回复
引用 4 楼 showbo 的回复:
text-overflow: ellipsis;要结合overflow:hidden才有用。。 不过使用这2个后word-break又没有用了,所以自己写个函数格式化最好,你那种要求不是很简单
<style>
.ellipsis{font-size:12px;line-height:15px;overflow: hidden;}
</style>
<div style="height: 45px;width: 30px;" class="ellipsis">123456789123456789</div>
<script>
    function cutstring(s, wl, hl) {
        var total = wl * hl;
        if (s.length <= total) return s;
        s = s.substring(0, total - 3) + '...';
        s = s.replace(new RegExp('[\\s\\S]{' + wl + '}', 'g'), function ($0) {return $0+'<br/>' });
        return s;
    }
    var div = document.getElementsByTagName('div');
    for (var i = 0; i < div.length; i++) div[i].innerHTML = cutstring(div[i].innerHTML, 5, 3);
</script>
好吧,我觉得我这个问题主要是在这个列宽后续可变
孤飞不倦 2014-01-09
  • 打赏
  • 举报
回复
一定要用text么?如果不是的话可以用textarea。可以限定行数和列数。
Go 旅城通票 2014-01-09
  • 打赏
  • 举报
回复
text-overflow: ellipsis;要结合overflow:hidden才有用。。 不过使用这2个后word-break又没有用了,所以自己写个函数格式化最好,你那种要求不是很简单
<style>
.ellipsis{font-size:12px;line-height:15px;overflow: hidden;}
</style>
<div style="height: 45px;width: 30px;" class="ellipsis">123456789123456789</div>
<script>
    function cutstring(s, wl, hl) {
        var total = wl * hl;
        if (s.length <= total) return s;
        s = s.substring(0, total - 3) + '...';
        s = s.replace(new RegExp('[\\s\\S]{' + wl + '}', 'g'), function ($0) {return $0+'<br/>' });
        return s;
    }
    var div = document.getElementsByTagName('div');
    for (var i = 0; i < div.length; i++) div[i].innerHTML = cutstring(div[i].innerHTML, 5, 3);
</script>
Jake443403168 2014-01-09
  • 打赏
  • 举报
回复
引用 1 楼 showbo 的回复:
自己格式化,一串数字和字母连一起是不会自动换行的,如果仅IE,chrome,可以设置word-break:break-all实现换行,firefox不支持这个




估计是要代码实现,这个文本是要放在一个格子里面的,宽度后续还可以伸缩,格式化宽度伸缩之后内容不能自动跟着变化
折叠省略号属性分别是
word-wrap: break-word;
text-overflow: ellipsis;
但是他们不能同时生效
Go 旅城通票 2014-01-09
  • 打赏
  • 举报
回复
自己格式化,一串数字和字母连一起是不会自动换行的,如果仅IE,chrome,可以设置word-break:break-all实现换行,firefox不支持这个

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧