jquery - 如何在 bootstrap 4 中将长文本截断为 1 行

Question

我想在 bootstrap 4 中将一些长文本截断成一行，我在这里阅读了很多解决方案，例如 Link 1 , Link 2 , Link 3但他们没有帮助。

我的文字:

这是我想要的样子:

但这发生在如下代码中，表格行向外突出一点，文本不在一行中。

这是我的代码:

     <div class="row">
            <div class="font-14">
                <table id="userLogTable" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">LOG LIST</th>
                            <th class="text-center">DETAIL</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    columns: [
        { data : "id", "className": "text-center" },
        { data : "log_info", "className": "text-log" },
        { data : "log_id", "className": "text-center",
            render: function(data) {
                return "...";     
            }
        }
    ],

.text-log {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  -webkit-box-orient: vertical;
}

Answer 1

固定行高，使overflow:scroll。这一定有效。

ATTR{
  font-size:12px;
  line-height:15px;
  height:30px;
  width:100%;
  overflow:scroll;
  white-space: nowrap;
}

ATTR::-webkit-scrollbar {
    display: none;
}

ATTR {
    -ms-overflow-style: none;
}