如果文本溢出，如何获取用户可见的文本？

Question

我有一个文本输入，我使用省略号表示文本已超出输入大小。有没有办法查看用户可见或隐藏在省略号后面的文本？ 谢谢

这里的用例是我向用户显示一个用逗号分隔的列表。如果列表超出输入字段的大小，我想显示类似item1, item2,... +5 more 的内容。为此，我需要知道哪些文本对用户可见/隐藏在省略号后面。

Answer 1

您可以为相同的文本添加title。当用户hover 文本时，它将显示原始文本。我已经给出了input 和p 的样本

.ellipse {
text-overflow:ellipsis;
width:70px;
overflow:hidden;
white-space:nowrap;
}

<p class="ellipse" title="This is the very big text">This is the very big text</p>

<input class="ellipse" title="This is the very big text" value="This is the very big text" />

编辑

根据您的新要求，您必须使用 JS/JQuery 来获得所需的结果。我不确定您将如何获得您的情况下的用户名。我给了样本，比如有一系列项目。你也不需要使用任何 CSS ellipsis 属性，因为你真的不是在寻找那个解决方案。看下面的sn-p

var items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'];

var orivalue = "";
var disvalue = "";

for(i=0; i<items.length; i++) {
 orivalue += (items.length - 1 == i) ? items[i] : items[i]+ ", ";
}
tmp = items.length - 2;
if(items.length > 2) {
  disvalue = items[0] + ", " + items[1] + ", ... +" + tmp + "more";
 }
 document.getElementById("user").value = disvalue;
 document.getElementById("user").title = orivalue;

.ellipse {
  width:140px;
}

<input id="user" class="ellipse" title="" value="" />