不要使按钮的宽度与弹出窗口的宽度成比例 window

Question

我想在弹出窗口中制作一个按钮 window 作为 Script Lab，如下所示。请注意，在 Script Lab 中，按钮的宽度足以将句子放在一行中，即使弹出窗口 window 不是很宽：

我几乎使用与 ScriptLab 相同的代码：

import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...

    return (
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
        <PrimaryButton
          style={{ margin: 'auto' }}
          text="Open link in new window"
          // tslint:disable-next-line: jsx-no-lambda
          onClick={() => {
            window.open(this.props.url);
          }}
        />
      </div>
    );

这是我的结果，其中按钮的宽度与弹出窗口的宽度成比例 window。结果，句子需要显示成两行，这不是我想要的。

有谁知道怎么修改代码才能得到类似Script Lab的效果？

编辑 1： 我做了一个沙盒：https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js

现在，问题是，如果我们 Open In New Window 并在新的浏览器选项卡中多次打开 https://i6jz6.csb.app/，我们可能会看到按钮中的文本字体略有调整。有谁知道如何避免这种情况？

Answer 1

您不希望按钮的文本换行，因此您需要更改字体大小，当您发现文本换行时按钮的高度增加时，您可以这样做。我建议您创建一个不可见但不是 'display: none'，可能是 'off-screen' 版本的按钮，以便在您知道需要正确的大小后更改实际按钮的字体。或者，用图像或字形代替文本，以及按钮文本的标题怎么样？

Answer 2

为 button.Setting 设置固定宽度，固定宽度会使它与弹出窗口的宽度不成比例 window。 width:280px;

第二个选项：如果你使用min-width，按钮宽度会减小到一个点。

第三个选项：如果使用最大宽度，按钮宽度将增加一个点。

第四种选择：您还可以使用“@media”查询根据屏幕尺寸自定义宽度。

Answer 3

按钮宽度：

为了不让按钮的宽度随容器按比例增长，您可以在按钮上强制执行 width: auto。这样，它的宽度只会达到包含文本所需的宽度。值 auto 也比具有固定宽度更好，因为如果弹出窗口变得太窄而无法在一行中显示文本，它可以自动换行（使用固定宽度你的按钮会溢出 - 这看起来真的很糟糕） .

关于字体调整

对于你体验到的字体调整——这在网络上是很常见的事情，它甚至有自己的名字——FOUT（Flash of Unstyled Text）。当您在页面上使用自定义字体时会发生这种情况，因为这些文件与其他任何文件一样，因此需要一些时间来下载。浏览器更喜欢尽早显示内容（即使没有加载自定义字体）而不是显示完美的内容（通过等待所有资源），但速度会有所下降。

完全避免 FOUT 的唯一方法（至少我知道）是使用系统字体而不是自定义字体（例如 github 就是这样做的）。
如果这不是一个选项，您可以通过在客户端机器上长时间缓存字体来最小化 FOUT。这样，他们将在第一次访问时短暂体验到闪光，但在以后的访问中不会。
您还可以通过告诉浏览器尝试 preload 页面所需的字体文件来尝试最小化 FOUT（FOUT 发生的部分原因是浏览器发现字体非常晚）https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

不要使按钮的宽度与弹出窗口的宽度成比例 window

Do not make the width of the button proportionnel to the width of the popup window

css

office-ui-fabric

office-ui-fabric-react

按钮宽度：

关于字体调整