设置手机端文本超出行高显示省略号

最新推荐文章于 2023-09-18 15:09:15 发布

编程工人

最新推荐文章于 2023-09-18 15:09:15 发布

阅读量303

点赞数 1

分类专栏： html5 javascript 文章标签： css css3 html

本文链接：https://blog.csdn.net/zjwlgr/article/details/122669096

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

1.给DIV设置属性：

width: 200px; text-overflow: ellipsis; overflow: hidden;

当div里面的内容总宽度找过 200PX的时候，超出的部分会以“...”的形式显示。

2.这个案例《CSS超出使用text-overflow显示省略号》适用于单行文本的现实，才会有效。但当div里面的内容出现多行的时候则不能达到预期的效果。下面是解决多行的时候显示“...”的方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
    $(function () {  
        $(".figcaption").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>  
    <style>  
        .figcaption  
        {  
            background: #EEE;  
            width: 410px;  
            height: 3em;  
            margin: 1em;  
        }  
        .figcaption p  
        {  
            margin: 0;  
            line-height: 1.5em;  
        }  
    </style>  
</head>  
<body>  
    <div class="figcaption">  
        <p>  
            You probably can't do it (currently?) without a fixed-width font like Courier. With  
            a fixed-width font every letter occupies the same horizontal space, so you could  
            probably count the letters and multiply the result with the current font size in  
            ems or exs. Then you would just have to test how many letters fit on one line, and  
            then break it up.</p>  
    </div>  
</body>  
</html>

比如在手机端网页需要横竖屏切换的话，需要判断当窗口变化的时候改变容器的高

var content_excerpt = function() {
var s_width = $(window).width();
var s_height = $(window).height();
if(s_width < s_height){
$(".box-excerpt").height(58);
}else{
$(".box-excerpt").height(40);
}
$(".box-excerpt").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)(\.\.\.)?$/, "..."));
};
});
};
content_excerpt();
$(window).scroll(function () {
content_excerpt();
});