表中的意外省略/截断行为
表中的意外省略/截断行为
提问于 2022-11-28 07:16:41
我正在试图截断表中的一些文本，但是它并没有像预期的那样工作。有人能给我解释一下我做的不对吗？
编辑:我想把表的宽度保持为max-width: 100%;
<script src="https://cdn.tailwindcss.com"></script>
<div class="w-56 overflow-x-hidden">
<div class="table max-w-full border-spacing-y-5 border border-red-200">
<div class="table-row">
<div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
This
</div>
<div class="table-cell pr-5 border border-green-200">
is
</div>
<div class="table-cell pr-5 border border-orange-200">
the
</div>
<div class="table-cell border border-purple-200 overflow-y-hidden">
<div class="flex">
<span class="truncate">text to truncate</span>
</div>
</div>
</div>
</div>
</div>
<p>Expected Results:</p>
<div class="flex w-36">
<span class="truncate">This is the text to truncate</span>
</div>
回答 1
Stack Overflow用户
发布于 2022-11-28 07:39:11
受this answer的启发。这个问题的其他答案也可能帮助你理解所涉及的问题。你得把我的香草CSS翻译成尾风。
.my-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.my-table {
width: 100%;
table-layout: fixed;
}<script src="https://cdn.tailwindcss.com"></script>
<div class="w-56 overflow-x-hidden">
<div class="table max-w-full border-spacing-y-5 border border-red-200 my-table">
<div class="table-row">
<div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
This
</div>
<div class="table-cell pr-5 border border-green-200">
is
</div>
<div class="table-cell pr-5 border border-orange-200">
the
</div>
<div class="table-cell border border-purple-200 overflow-y-hidden my-truncate">
text to truncate
</div>
</div>
</div>
</div>
<p>Expected Results:</p>
<div class="flex w-36">
<span class="my-truncate">This is the text to truncate</span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74597186
复制相关文章
相似问题
腾讯云开发者
