一行数据自适应不换行

来源：互联网发布：韩服数据编辑：程序博客网时间：2024/05/17 23:29

很多时候我们的页面上会需要一个表格，或则任意但是希望所有的文字在一行中，放不下就显示。。。，为此我写了这个js 吐舌头。

上代码line_js.html

<!DOCTYPE html><html>    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>    <script type="text/javascript" src="js/line_change1.js" ></script>    <style>    </style>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <table style="width: 100%;">            <tr class="line_zyq">                <td width="10%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="30%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>            </tr>            <tr class="line_zyq">                <td width="10%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="30%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>            </tr>            <tr class="line_zyq">                <td width="10%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="30%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>            </tr>            <tr class="line_zyq">                <td width="10%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="30%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>                <td width="20%">啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃</td>            </tr>        </table>    </body></html>

line_change.js

//修改效果（闪屏）---lines_contents和lines_texts的值先付好别给真正的位置放东西，后$(document).ready(line_window_change)//内容集合var lines_contents = [    ["啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"],    ["啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"],    ["啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"],    ["啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"]];//文字集合var lines_texts = [    ["啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"],    ["啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"],    ["啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"],    ["啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊", "啊呜吃饭啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃饭吧啊啊呜吃", "啊呜吃饭啊啊"]];//每一行的字数var fonts = [];var lineIndex = 0;var windowWidth = 0;var windowHeigth = 0;function line_document_change() {    windowWidth = $(window).width();    windowHeigth = $(window).height();    $(".line_zyq").each(function() {        //所设行的高度        var lineObjHeigth = $(this).height();        //所设行中的一行文字的高度        var lineObjFontHeigth = $(this).css("line-height");        //所设行的宽度        var lineObjWidth = $(this).width();        //                var lineObjPadding=$(this).css("padding");        //所设行中文字的大小        var ss = $(this).css("font-size");        var lineObjFontSize = ss.substring(0, ss.length - 2);        //所设行的子节点（不包含孙辈）        var lineChildren = $(this).children();        //内容数组        var index = 0;        var contents = [];        var texts = [];        $(this).children().each(function() {            contents[index] = $(this).html();            texts[index] = $(this).text();            var fontNumber = parseInt(parseInt($(this).width()) / parseInt(lineObjFontSize));            var textLen = texts[index].length;            if(fontNumber < textLen) {                $(this).html("<span title='" + contents[index] + "'>" + texts[index].substring(0, fontNumber - 1) + "...</span>");            }            index++;        });        lines_contents[lineIndex] = contents;        lines_texts[lineIndex] = texts;        lineIndex++;    });    for(var i = 0; i < lines_texts.length; i++) {        var len = 0;        for(var j = 0; j < lines_texts[i].length; j++) {            len += lines_texts[i][j].length;        }        fonts[i] = len;    }}function line_window_change() {    if(windowWidth != $(window).width()) {        windowWidth = $(window).width();        lineIndex = 0;        for(var i = 0; i < lines_texts.length; i++) {            var len = 0;            for(var j = 0; j < lines_texts[i].length; j++) {                len += lines_texts[i][j].length;            }            fonts[i] = len;        }        $(".line_zyq").each(function() {            //所设行的高度            var lineObjHeigth = $(this).height();            //所设行中的一行文字的高度            var lineObjFontHeigth = $(this).css("line-height");            //所设行的宽度            var lineObjWidth = $(this).width();            //所设行中文字的大小            var ss = $(this).css("font-size");            var lineObjFontSize = ss.substring(0, ss.length - 2);            //所设行的子节点（不包含孙辈）            var lineChildren = $(this).children();            var index = 0;            var line_fonts = (fonts[lineIndex] + lines_texts[0].length) * parseInt(lineObjFontSize);            $(this).children().each(function() {                if(line_fonts > lineObjWidth) {                    var fontNumber = parseInt(parseInt($(this).width()) / parseInt(lineObjFontSize));                    var textLen = lines_texts[lineIndex][index].length;                    if(fontNumber < textLen) {                        $(this).html("<span title='" + lines_contents[lineIndex][index] + "'>" + lines_texts[lineIndex][index].substring(0, fontNumber - 1) + "...</span>");                    } else {                        $(this).html(lines_contents[lineIndex][index]);                    }                } else {                    $(this).html(lines_contents[lineIndex][index]);                }                index++;            });            lineIndex++;        });    }}$(window).resize(line_window_change);$(document).ready(line_document_change);//$(document).ready(line_window_change);

效果图

然后根据自己的需要修改吧

阅读全文

1 0