超过高度部分用省略号代替//////同一行超出宽度部分用省略号代替

最新推荐文章于 2023-08-22 18:02:55 发布

原创最新推荐文章于 2023-08-22 18:02:55 发布 · 769 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的文本自动截断方法，确保文本块的高度固定，并在内容超过显示区域时自动添加省略号。同时，探讨了CSS中用于处理文本溢出的不同方法。

js代码

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">  
    $(function () {  
        $(".text_para").each(function (i) {  
            var divH = $(this).height();  
            var $p = $("p", $(this)).eq(0);  
            while ($p.outerHeight() > divH) {  
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));  
            };  
        });  
        });  
</script>

css代码

<style>  
  .text_para  
    {  
      height: 418px;
    }
</style>

html代码

<div class="text_para"> <p>Beijing Guardian Dog Equipment Co., Ltd. is a specialized company engaged in Research & Development, production, sales and service of the training equipment supplies for working dog. Thus far, our company has admitted by China Working Dog Management Association with full membership, and is also the annual Vice Chairman of Zhongguo Gongzuo Quanye (zggzqy).</p></div>

二、同一行超出宽度部分用省略号代替

1. word-break:break-all;只对英文起作用，以字母作为换行依据 
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据 
3. white-space:pre-wrap; 只对中文起作用，强制换行 
4. white-space:nowrap; 强制不换行，都起作用 
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）