html5手机上展示效果

神色自若 2016-07-05 04:01:33

咨询各位大师，有谁知道下面的数据展示效果如何作？
会根据字段内容多少自动行换。

...全文

267 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhangsheng_1992 2016-07-06

打赏
举报

执行后

zhangsheng_1992 2016-07-06

打赏
举报

给你端demo把原理就是计算下那行的字数决定要不要换行



<!DOCTYPE html>

<html>

    <head>

        <title>test</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type='text/javascript' src='public/js/jquery.min.js'></script>

    </head>

    <body>     

        <div style='width:200px;border:1px solid #ccc'>

            <div class='list'>

                <p>备注:<span>aaaaabbbbbcccccddddd</span></p>

            </div>

            

             <div class='list'>

                <p>备注:<span>aaaaabbbbbccccccdddddeeeeeffff</span></p>

            </div>

        </div>

        <script type='text/javascript'>

            //假定10个字一换行

            var fontlimit = 10;

            var length = $('.list').length;

            for(var i = 0; i< length;i++){

                var value = $('.list').eq(i).children('p').children('span').html();

                if(value.length > 10){

                    //计算分几行

                    var num = Math.ceil(value.length/fontlimit);

                    var str = '';

                    //分行

                    for(j=1;j<=num;j++){

                        str += value.substr(10*(j-1),fontlimit) + '<br />';

                    }

                    //分好行重新写进去

                    var value = $('.list').eq(i).children('p').children('span').html(str);

                }

            }

                          

        </script>

    </body>

</html>