Question

我再次需要你的帮助。我想修改我当前的html表以在悬停时突出显示。但由于某种原因，我无法通过省略号来解决这个问题。在我当前的html表中，省略号工作正常，但我想在悬停时添加突出显示并且它不起作用。所以我尝试了一种不同的方法，即下面的脚本。悬停的突出显示正在工作，但不是省略号。

我真的需要你的帮助。有关如何使其在我的代码下工作的任何专家提示/建议？提前谢谢。

点击hightlight脚本：

<script>
if (!('select' in HTMLTableCellElement)) {
HTMLTableCellElement.prototype.select = function() {
var range = document.createRange();
range.selectNodeContents(this);
window.getSelection().addRange(range);
    }
}
</script>

CSS：

<style type="text/css">

table{
    table-layout: fixed;
    width: 170px;
    height: 35px;
}

.table {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}
.table th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;}
.table tr {background-color:#ffffff;}
.table td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;}
.table tr:hover {background-color:#ffff99;}
.table td text-overflow:
.table td width: 225px;
.table td white-space: nowrap;


::selection {
background-color: orange;
color: blue;
}

</style>

表格样本：

<table class="table" border="1">
<tr><th>Header</th></tr>
<tr><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td></tr>

我期待着收到您的回复。

最佳，

杰森

Answer 1

你的CSS无效。这样：

.table td text-overflow:
.table td width: 225px;
.table td white-space: nowrap;

应该是这样的：

.table td { text-overflow: ellipsis;
            width: 225px;
            white-space: nowrap;
            overflow:hidden; }

Answer 2

我终于明白了！我刚把我的CSS改成了这个：

    <style type="text/css">

table{
    table-layout: fixed;
    width: 170px;
    height: 35px;
    font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;
}

table td {
    font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 225px;
    white-space: nowrap;
}

table th {
    font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;   
}

#table tr {background-color:#ffffff;}
#table tr:hover {background-color:#ffff99;}

::selection {
background-color: orange;
color: blue;
}

    </style>

感谢Malk的想法！

在html表上的省略号

2 个答案: