如何隐藏属于div但在另一个div上显示的内容？

Question

我有固定宽度的桌子。当有空间时，它会转移到换行符，但是有时一个单词太长，会跳到另一个div。我想隐藏这部分文字。

Answer 1

您可以尝试以下解决方案：

.truncate-text {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  overflow: hidden;
  /*
    Use (if you want to truncate the text with three dots):
    text-overflow: ellipsis;
  */
}

<div class="truncate-text">
  longlonglonglongword
</div>

这里，在用于类truncate-text的所有CSS属性中，有两个很重要，即overflow: hidden和text-overflow: ellipsis。

Here是到小提琴的链接，在这里很好用。

这里还有一些参考资料：

1. overflow CSS property
2. text-overflow CSS property

我希望这会有所帮助。

Answer 2

您可以尝试以下代码

table td {
  width: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}

table td:hover {
  overflow: visible;
}

<table border='1px' style="table-layout:fixed; width:20px;">
  <tr>
    <td>ddddsssssssssssssss</td>
  </tr>
</table>

当您将其悬停时，它还有助于查看隐藏的文本。

Answer 3

这将把您的文本包装在div中，即使您的字符串是完整的（这也是我假设的意思）。

.wordwrap {  
   white-space: pre-wrap;      /* Webkit */    
   white-space: -moz-pre-wrap; /* Firefox */     
   white-space: -pre-wrap;     /* Opera <7 */    
   white-space: -o-pre-wrap;   /* Opera 7 */     
   word-wrap: break-word;      /* IE */ 
}

问题是您的单词很长。您可以按照他们说的做，用自动换行：break-word;或者您可以隐藏文本。

您可以使用文本溢出功能，即：

p {
  text-overflow: ellipsis;
}

位置：

text-overflow: clip|ellipsis|string;