Question

我有一个表格单元格，我希望在100px宽度上隐藏溢出文本。它在这里，但它仍然显示溢出文本：http://jsfiddle.net/tkatcqwe/

.text {
  width: 100px;
  background: yellow; 
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

Answer 1

＆＃13;

(find-file "~/init.org")

＆＃13;

.text {
  max-width: 100px;
  width: 100px;
  background: yellow; 
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

＆＃13;

尝试将最大宽度100px添加到.text中添加了片段。

Answer 2

如果您希望保持表格不变，请将文本换行到<div>或任何块级元素，或<span> + display:block。

＆＃13;

.text {
    width: 100px;
    background: yellow;
    white-space: nowrap;
    overflow: hidden;
}

＆＃13;

<table><tr><td><div class='text'>a really long text about random things, blah blah blah blah blah blah blah</div></td></tr></table>

＆＃13;

或者在表格上设置width:100px而不是table-layout:fixed。

＆＃13;

table {
    width: 100px;
    table-layout: fixed;
    border-collapse: collapse;
}
.text {
    background: yellow;
    white-space: nowrap;
    overflow: hidden;
}

＆＃13;

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

＆＃13;

如何隐藏表格单元格中的溢出来隐藏文本？

2 个答案: