如何获取宽度约束为浏览器窗口宽度的文本？

Question

我想要实现的是宽度约束于窗口宽度的文本，无论缩放级别/字体大小如何，并且当我更改窗口宽度时自动重新定义。最终目标是了解如何为我想要阅读的每个网站执行此操作的一般方法。

例如，如果您使用<command> + <+>/<ctrl> + <+>放大，则在stackoverflow.com上，文本的宽度与字体大小/图像一起增加，并且文本很快就会比屏幕宽。

但我宁愿让文本调整到窗口的大小，所以我可以通过简单地重新设置浏览器窗口来选择宽度。

所以，我想我想问的是......

尝试在网页中实现这一目标时，我应该寻找什么？ 应该注意哪些html元素/ css属性？

最初，我正在考虑创建可与Stylish一起使用的样式来实现这一目标。也许还有另一种方式？

编辑：解决方案，根据@Vipin Mohan建议。我只是将以下代码放入时尚风格并将其激活为SO

p, li{
    width: 80vw; /* adjust for website/personal preference */
    text-align: justify;
}

p + p {
    margin-top: 8px;
}

注意：我的简单解决方案无论如何都不是完美的，因为它会使SO的界面有点受损，例如顶部缺少按钮。

Answer 1

您正在寻找其视口百分比长度。

视口百分比长度相对于包含初始值的块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放

值为：

• vw（视口宽度的百分比）vh（视口高度的百分比）

• vi（1％ 在根元素的内联轴方向上的视口大小）

• vb（在根元素的方向上视口大小的1％ 阻止轴）

• vmin（较小的vw或vh）

• vmax（较大的
  或VW或VH）

1 v *等于初始包含块的1％。

示例font-size: 1vw 假设您的显示器宽度为1000px，浏览器最大化，那么1vw = 10px。如果你的窗口大小减少到500px，那么1vw = 5px等等。

如您所见，当视口宽度增加时，font-size也会增加，而无需使用媒体查询。

这些值是一个大小单位，就像pxor em一样，因此它们也可用于调整其他元素的大小，例如宽度，边距或填充。

浏览器支持非常好。这些天你很少需要回退，因为大多数人使用至少2010年或更晚的浏览器版本。