Question

我有一个需要截断的文本（h4标签）和另一个（＆＃34;一个＆＃34;标签），它们不能被截断，但始终与h4文本显示在同一行。我试图将h4标记包含到div中，并在该div上添加截断文本的样式，但这样链接将显示在h4文本下。

所以，问题是我需要截断h4文本，并且链接不会被截断，而是显示在同一行。

CSS：

.thread-title {
   width: 100px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;   
} 
h4 {
   display: inline;
}

HTML：

<td class="thread-title thread-column">
    <h4>Some long text here to be truncated</h4>
    <a href="http://www.google.com" title="Go to article" target="_blank"> my link </a>
</td>

Answer 1

这是一种可能在HTML表格中起作用的方法。

我将display: inline-block设置为h4和a元素，并将max-width值应用于h4。

需要将约束宽度或最大宽度设置为h4才能使省略号生效。

如果您想限制h4和a的宽度，那就更棘手了，需要更多HTML标记或JavaScript（您可以根据自己的设计要求做出决定）。

请务必将h4边距设置为零（或根据需要）并使用vertical-align保持两个元素正确排列。

为确保h4和a停留在一行，请将div包裹在white-space: nowrap中（根据您的要求，可能不会严格要求布局）。

如果您在包装div上使用white-space: nowrap，则h4元素不需要该属性，因此您可以稍微简化CSS。

table {
  border: 1px dotted blue;
}
h4 {
  max-width: 125px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  margin: 0;
  border: 1px dotted blue;
  vertical-align: top;
}
a {
  display: inline-block;
  vertical-align: top;
}
div {
  white-space: nowrap;
}

<table>
  <tr>
    <td class="thread-title thread-column">
      <div>
        <h4>Some long text here to be truncated</h4>
        <a href="http://www.google.com" title="Go to article" target="_blank"> my link </a>
      </div>
    </td>
  </tr>
</table>

从元素中删除截断样式

1 个答案: