使用滚动条使宽度适合内容
[英]Fit width to content with a scrollbar
问题描述
一旦出现垂直滚动条，我就会遇到 HTML 元素的宽度问题。 通常内容适合盒子，盒子宽度会调整以适合内容。 它应该像往常一样自动执行此操作。 但是当盒子的孩子需要一个垂直滚动条时，该滚动条会占用水平空间，并且项目将不再适合盒子。 该框应该延伸到滚动条的宽度，但它没有。
我究竟做错了什么？ 如果没有 JavaScript，这甚至可能吗？
我很难用语言来解释这种情况，所以请看下面的示例代码。
当盒子高度足够大以至于滚动条消失时，在相同的宽度下，所有的孩子都将适合里面。 但是使用滚动条，内容被裁剪。 那就是问题所在。
更新：
div 子项中的文本被有意修剪，以防盒子不能变得比内容所需的更宽。 在那种情况下（只有那时）应该修剪孩子的内容。 决不能显示水平滚动条。 但只要有足够的宽度空间，盒子就应该简单地做它所做的事情，并增长到适合里面的所有东西。
更新：
如果不可能让 CSS 做到这一点，那么我至少可以用 JavaScript 做什么来检测内容是否被裁剪，以及我需要手动扩展元素的宽度以适应所有内容？ 我已经可以确定有多少空间并在需要时将盒子移到一边。 但我仍然需要找出时间和数量。
<!doctype html> <html> <head> <meta charset="utf-8"> <style> .container { position: absolute; left: 50px; top: 50px; height: 100px; overflow: auto; border: solid 1px black; } .container > div { overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 4px 7px; } </style> </head> <body> <div class="container"> <div>Item 1 with a long text</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div> </body> </html>
1 个解决方案
解决方案1
0 2022-06-25 19:48:32
在 CSS 规则下： .container > div
你有这个属性： overflow-x: hidden;
尝试完全删除它。 这会将您的overflow-x: hidden恢复为overflow-x: auto并且应该可以解决问题。
该代码隐藏了溢出，而不是调整框的大小。
输入宽度适合内容
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.