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

骑猪看日落 2022-05-21 11:17 236阅读 0赞

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;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关通过CSS样式控制不换行，超出部分用省略号代替

通过CSS样式控制不换行，超出部分用省略号代替

旧城等待，/ 2024年04月23日 12:46/ 0 赞/ 38 阅读

相关 jsp,div 限制字数，超出部分用省略号代替

1.我是用struts2标签做的：如下： <%@ page language="java" import="java.util." pageEncoding="UTF

野性酷女/ 2024年02月17日 14:16/ 0 赞/ 10 阅读

相关 TextView限制字数,用省略号...代替

问题：在TextView中如何限制字数，并且用省略号代替多余部分的文字？回答：在xml文件中的TextView中添加属性，使用两行代码即可： `android:lines

野性酷女/ 2023年10月18日 09:37/ 0 赞/ 81 阅读

相关超出部分显示省略号

单行 { overflow: hidden; white-space: nowrap; text-overflow: elli

太过爱你忘了你带给我的痛/ 2022年12月17日 04:26/ 0 赞/ 190 阅读

相关 css 设置文字溢出部分使用省略号代替

1. 块级元素 `display: block` white-space:nowrap; / 文本不换行 / overflow-

妖狐艹你老母/ 2022年11月25日 10:19/ 0 赞/ 211 阅读

相关文字设置css样式，在超出宽度后用省略号...代替显示

html使用css让文字超出部分用省略号三个点显示的方法：　　我正确使用的就是下面的代码，li里面是a标记。在IE和google中使用是正常的，火狐不知道，我也不在意，等你

比眉伴天荒/ 2022年05月27日 01:17/ 0 赞/ 238 阅读

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

js代码 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <scrip

骑猪看日落/ 2022年05月21日 11:17/ 0 赞/ 237 阅读

相关 CSS文本超过两行用省略号代替

只显示一行，超出部分用省略号 white-space: nowrap; overflow: hidden; text-overflow

╰半夏微凉°/ 2022年03月17日 04:56/ 0 赞/ 259 阅读

相关 CSS 文字超出部分省略号代替

对于一行： overflow: hidden; // 溢出部分隐藏 text-overflow: ellipsis; // 超出部分用省略号代替，或者

た入场券/ 2022年01月17日 05:49/ 0 赞/ 334 阅读

相关 css样式超出部分用省略号...代替

.messagediv{ overflow:hidden; text-overflow:ellipsis; white-

布满荆棘的人生/ 2022年01月14日 09:57/ 0 赞/ 266 阅读