一行数据自适应不换行

最新推荐文章于 2020-10-07 10:21:55 发布

qq_30461115

最新推荐文章于 2020-10-07 10:21:55 发布

阅读量569

点赞数 1

文章标签： javascript 不换行 table 自适应省略号

本文链接：https://blog.csdn.net/qq_30461115/article/details/76114279

版权

博客介绍了如何使用JavaScript实现表格数据在一行内显示，并在超出时显示省略号。提供了一个名为line_js.html的代码示例供读者参考和调整。

摘要由CSDN通过智能技术生成

很多时候我们的页面上会需要一个表格，或则任意但是希望所有的文字在一行中，放不下就显示。。。，为此我写了这个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%">啊呜吃饭啊啊呜吃饭吧啊啊