输入按钮无响应(溢出容器)

Question

之前,我使用了自制提交调用,这样我可以有没有形式<form>和<input>按钮.一个按钮可以是这样的:

<div class="ui big green button">This is a long button that should not go off screen</div>

但是,现在,我已经切换到另一个前端库,所以我必须这样做:

<input type="submit" class="ui big green button" value="This is a long button that should not go off screen" />

然而,这需要注意我的input按钮不响应窗口大小,即当窗口很小时它不会变厚,而是从屏幕上消失.

我认为这是因为一些奇怪的样式会自动添加到input我无法触及或更改的位置:

user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
}

有更多的方式,我不知道究竟是什么使我的按钮这样做,所以我不知道要覆盖什么(如果我可以).

这是我的代码,所以你可以看到这个:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/button.min.css" rel="stylesheet"/>
<input type="submit" class="ui big green button" value="This is a long button that should not go off screen" />

<div style="margin-top: 20px;" />

<div class="ui big green button">This is a long button that should not go off screen</div>

https://jsfiddle.net/vLaf94t1/

我该怎么做才能解决这个问题呢？

Answer 1

将其添加到您的按钮元素:

white-space: normal;

修改小提琴

深埋在用户代理样式表中的是:

white-space: pre;

16.6白色空间:white-space 财产

此属性声明如何处理元素内的空白.值具有以下含义:

normal

此值指示用户代理折叠空白序列,并根据需要断行以填充行框.

pre

此值可防止用户代理折叠空白序列.仅在保留的换行符处断行.