如何限制網格單元格寬度並防止其內容溢出？

Question

我正在使用的生成 HTML 代碼的框架輸出以下內容：

 body { width: 200px; /* ignore this, this is only for demonstration purpose */ }

 <div class="select-option-text" style="white-space: nowrap; overflow: hidden;"> Some very long text that should be truncated with an ellipsis if it's too long to fit <span class="select-option-secondary-text">Always show</span> </div>

我想要實現的是始終在.select-option-secondary-text旁邊顯示.select-option-secondary-text text 。 對於短文本，這可以正常工作，但如果文本像我的示例一樣長，它會將.select-option-secondary-text推離可見區域。

我無法使用 flexbox 解決這個問題，但我能夠使用 grid 來接近我的要求：

 body { width: 200px; /* ignore this, this is only for demonstration purpose */ } .select-option-text { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) auto; }

 <div class="select-option-text" style="white-space: nowrap; overflow: hidden;"> Some very long text that should be truncated with an ellipsis if it's too long to fit <span class="select-option-secondary-text">Always show</span> </div>

但是，第一個“單元格”仍然溢出到第二個“單元格”中。 使用背景顏色並不是一個真正的選項，因為.select-option-text有自己的背景顏色，它是用 JS 以編程方式設置的，我不知道那種顏色。 我也不能將長文本包裝成一個span或其他東西，因為正如我所說，這個結構是由第三方 JS 庫動態創建的。

我能做些什么來防止文本溢出到下一個單元格中，甚至可以用省略號截斷它？

Answer 1

由於沒有太多上下文，因此很難確定，但是如果我正確理解您想要實現的目標，這就是我會做的：

.select-option-secondary-text {
position: absolute;
left: 200px; [or whatever the value should be]
}

此外，如果您刪除網格內容，您可以將text-overflow: ellipsis添加到您的.select-option-text div。

Answer 2

如果不將文本包裹在其自己的元素中，顯然不可能使用 CSS。