0

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

在此处输入图像描述

我几乎使用与 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>
    );

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

在此处输入图像描述

有谁知道如何修改代码以获得像 Script Lab 一样的效果？

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

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

4

3 回答 3

1

On button width:

In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).

On font adjustments

For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.

  1. The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
  2. If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
  3. 您还可以通过告诉浏览器尝试preload页面所需的字体文件来尝试最小化 FOUT（FOUT 发生的部分原因是浏览器很晚才发现字体）https://developer.mozilla。 org/en-US/docs/Web/HTML/Preloading_content
于 2020-06-11T16:28:59.297 回答
0

您不希望按钮的文本换行，因此您需要更改字体大小，当您发现文本换行时按钮的高度增加时，您可以这样做。我建议您创建一个不可见的，但不是“显示：无”，可能是“屏幕外”版本的按钮，以便在您知道需要正确的大小后更改实际按钮的字体。或者，图像或字形而不是文本，以及按钮文本的标题呢？

于 2020-06-08T17:07:44.970 回答
0

给按钮设置一个固定宽度。设置一个固定宽度会使其与弹出窗口的宽度不成比例。 width:280px;

Second Option: If you use min-width, the button width will decrease to a point.

Third Option: If you use max-width, the button width will increase upto a point.

Fourth Option: You can also use '@media' queries to customize the width according to size of the screen.

于 2020-06-08T17:41:54.153 回答