Question

这是问题所在。我将文本溢出设置为：text-overflow：省略号。但是当输入文本值超出我设置的长度时，它无法在省略号中显示。以下是部分代码：

<td align="left" width="220px">
    <h:inputText id="id_NETypeInput" value="" style="width:200px;font-size:12px;align:left;text-shadow: 1px 2px 3px rgba(0,0,0,0.5);text-overflow:ellipsis;"
        styleClass="otEditField"
        onclick="#{rich:component('ruleTypeSelectPanel')}.show()" />
</td>

有何评论？个。

Answer 1

您需要在元素上添加overflow: hidden;和最大高度和宽度，并结合text-overflow: ellipsis，这将显示省略号。

Answer 2

试试这个，但要确保它不会在每个浏览器中都有效，所以请记住

/*id or class whatever or inline */{
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; /* "overflow" value must be different from "visible" */
  text-overflow:    ellipsis;
}

或者如果您想在此处进行更多探索，请点击链接https://developer.mozilla.org/en/docs/CSS/text-overflow 这是另一个用于检查文本溢出的兼容性的链接 http://caniuse.com/text-overflow

文本溢出在IE8和Firefox中的兼容性

2 个答案: