0. 前言

适合所有格式文本, 包括中英混合文本
有时候英文和混合文本会省略的有点多, 可以进一步优化

1. 思路

1. 首先, 这个方案是针对容器设置了宽高, 然后因文本字数过多, 在多行展示时溢出容器边界的问题
2. 因此, 容器能装下的文本的行数就是一开始就能确定的, 设置的宽高限定死了范围
3. 所以, 我们可以通过获取容器内文本的行高, 来得出容器能放下多少行文本
4. 然后, 可以获取字体的大小, 算出每一行的字数
5. 最后, 算出保留的字符串长度, 即最大容纳行数乘以每行字数, 进行字符串裁截拼接即可完成

2. 一些细节

1. 由于有的 CSS 属性并不能直接访问, 需要通过 window 对象下的方法window.getComputedStyle(element, null) 来获取元素所有的 CSS属性
2. 文本的行高和字体的大小均在第一步获取的属性中所包含
文本的行高是属性 lineHeight, 字体的大小则是属性 fontSize
3. 这两个属性都是 CSS 属性中的组合词, 分别是 line-height 和 font-size,
因此在 JS 中调用时需要写成小驼峰式
4. 容器一定要设置行高, 即 line-height 属性, 否则对除英文外的字符失效
5. 行高中设置的 em 单位是相对单位, 如果字体高度是 16px 那么 1em 也是 16px

3. 代码

HTML & CSS 代码
设置了 3 个容器, 分别放入纯中文文本, 纯英文文本和混合文本

    <div id="theone" style="color: aliceblue; margin: 20px; border: black 1px solid; width: 350px; height: 70px; line-height: 1.2em;">
        <p id="thesecond">She just made having a baby look lovely. Everything is white and she always has a fresh blueberry pie that's steaming and scones and clotted cream and she's reading The Old Man and the Sea and her little boy is rolly with bonnets. It's amazing, and I thought this is lovely. My kid is like playing with like explosive devices. I don't know where she's found them, like sticking them in our dog's ear. She already knows how to dry wall cause she puts holes in the wall.</p>
    </div>
    <br /><br /><br /><br /><br /><br />

    <div id="thethird" style="color: aliceblue; margin: 20px; border: black 1px solid; width: 350px; height: 70px; line-height: 1.2em;">
        <p id="thefourth">“今天的中国人一如当年的德国人，沉迷于‘崛起'幻觉，习惯于听信他人的吹捧，还想当然地认为只要中国继续保持经济增长，不仅未来的经济总量超越‘世界老大'美国可以期待，中国实现全面复兴也将是囊中之物。”上海外国语大学国际关系与公共事务学院教授程亚文在其新著《大国战略力》中尖锐地指出中国现下有不少人陷入了“盛世”幻觉，并没有意识到在经济总量的背后，中国其实还是一个极为落后的国家。世界上还没有一个大国是在风平浪静中兴起的，中国的新一轮文明复兴也将充满风险和曲折。防止国家崩溃、解体或衰败应该成为中国国家战略的重中之重。染上“软乎乎的幸福主义”只会让一个国家变得脆弱。</p>
    </div>
    <br /><br /><br /><br /><br /><br />

    <div id="thefifth" style="color: aliceblue; margin: 20px; border: black 1px solid; width: 350px; height: 70px; line-height: 1.2em;">
        <p id="thesixth">
            defer 属性规定是否8461310321230320对脚本执行进行延迟，直到页面加载为止。
        有的 javascript 脚本 document.write 方法来784562032创建当前的文档内容，其他脚本就不一定是了。
        如果您的脚本不会改变文档的内容，可将 defer 属性加入到 script 标签中，以便加快处理5616413565文档的速度。因为浏览器*****知道它将能够安全地读取文档的剩余586861514部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
        </p>
    </div>

JavaScript 代码
溢出重置函数

function retext(father, child) {
            var thestyle = window.getComputedStyle(father, null);//父容器的全部CSS属性
            var oneheight = thestyle.height;//父容器内部高度
            var lineheight = parseInt(thestyle.lineHeight, 10);//父容器的文本行高
            var wordheight = parseInt(thestyle.fontSize, 10);//实际字体大小(有时候行高改变了,字体大小并不会变)
            var realcounts = parseInt(parseInt(oneheight) / lineheight);//实际父容器所能放下的行数
            var linewords = parseInt(parseInt(thestyle.width) / wordheight);//每行的字数
            var thetext = child.textContent;//整段文本
            child.textContent = thetext.substr(0, realcounts * linewords - 1) + "..."; //多余文本省略号显示
        }

执行文本溢出处理

        var theone = document.getElementById('theone');//父容器
        var thesecond = document.getElementById('thesecond');//子容器
        var thethird = document.getElementById('thethird');//父容器
        var thefourth = document.getElementById('thefourth');//子容器
        var thefifth = document.getElementById('thefifth');//父容器
        var thesixth = document.getElementById('thesixth');//子容器
        retext(theone, thesecond);
        retext(thethird, thefourth);
        retext(thefifth, thesixth);