如何实现两行文本增多显示省略号

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        padding: 10px;
        font-family: Arial;
    }
    
    #test {
        width: 400px;
        line-height: 20px;
        border: 1px solid #999;
    }
    </style>
</head>

<body>
    <div id="test">天津市人民检察院第一分院起诉书指控:被告人令计划利用其担任中共中央办公厅副主任、主任、中央书记处书记、中央统战部部长、全国政协副主席等职务上的便利,为他人谋取利益,索取、非法收受他人巨额财务;非法获取国家秘密,情节严重;滥用职权,致使公共财产、国家和人民利益遭受重大损失,情节特别严重。对令计划,依法应当以受贿罪、非法获取国家秘密罪、滥用职权罪追究刑事责任。</div>
    <script type="text/javascript">
    function ellipsis(thisId, needLeng) {
        var ididid = document.getElementById(thisId);
        var nowLeng = ididid.innerHTML.length;
        if (nowLeng > needLeng) {
            var nowWord = ididid.innerHTML.substr(0, needLeng) + ‘...‘;
            ididid.innerHTML = nowWord;
        }
    }
    ellipsis(‘test‘, 30);
    </script>
</body>
<html>

时间: 2024-10-15 16:35:52

如何实现两行文本增多显示省略号的相关文章

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

网页之文本溢出显示省略号

1.单行文本溢出显示省略号的css写法 1 overflow:hidden; 2 text-overflow:ellipsis; 3 white-space:nowrap;/*不换行*/ 2.多行文本显示省略号 这里根据应用场景来实现 1)Webkit浏览器或移动端页面 可以使用webkit的私有属性:-webkit-line-clamp(这个属性不属于css规范),该属性用来显示块元素显示的文本行数.要实现该效果,需要组合其他的Webkit属性. 常见结合的属性: display: -webk

JS文本中间显示省略号

众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display:block; 多行文本: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 如果想中间显示省略号呢?? 现在需

CSS中超出的文本内容显示省略号

首先,分析超出内容有两种情况,单行内容超出和多行内容超出,以下逐一说明: 单行内容操作: 单行操作必须有width属性,就是元素要有宽和高的限制才可以,具备以上基本条件之后,编写以下代码 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 此时,即可看到单行文本超出显示省略号的效果. 多行内容操作: 多行文本超出省略早期是没有该写法的,本文使用的是css3对WebKit的拓展写法,需要注意,该方法只适用于WebKit浏览器和移

文本超出显示省略号/数字字母折行有关css 属性

文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折行 word-break:break-all;  英文单词会分开折行 word-wrap:break-word; 英文单词完整处折行 令拓展: word-spacing :5px;  单词/字符之间间隔距离   white-space是字符是否换行显示的. 原文地址:https://www.cnbl

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

单行文本溢出显示省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

浅谈移动端过长文本溢出显示省略号的实现方案

本文首发于 vivo互联网技术 微信公众号? 链接: https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者:何彦军 目前在移动端开发的展示界面中,如果一段文本的数量过长,受限于屏幕的宽高等因素,有可能不能完全显示,这个时候就会把溢出的文本显示成省略号. 最近就亲身经历了一系列类似的需求,于是这里做个总结和记录. 首先一个最基本的需求就是当文本超过一行最大宽度时,超出的部分变为省略号,如下图所示. 这个功能比较基础,只用css就可以实现,如下图所

截取长文本,显示省略号(多行)

其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟 我说-webkit-line-clamp属性可以,就去查了查,果然 Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览器份额不是webkit 占大头(特别是天朝),看前缀就知道只支持webkit内核,他属于webkit内部属性, 和-webkit-text-size-adjust:none(这个Pc端已经不在支持,移动端还可以使用) 类似,但是移动端不一样,现在移动端基本是ios和Android的天下,这个属性还是 很

css文本过多显示省略号

显示一行不换行的方式 div{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 显示两行后多余文字显示省略号 div{ overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }