我可以将 word-wrap:break-word 设置为提交类型的输入吗？

Posted 2023-02-22

【中文标题】我可以将 word-wrap:break-word 设置为提交类型的输入吗？

【英文标题】：Can I set word-wrap:break-word to input of type submit?

【发布时间】：2013-05-16 11:45:56

【问题描述】：

CSS word-wrap: break-word 可以应用于submit 类型的<input/> 吗？

我已经应用了那个 css，但它没有做任何我所期望的事情。我试图让我的提交输入环绕它之前的标题。

对于this fiddle，输入或链接可以换行吗？所以我希望按钮和链接的第一个单词与标题在同一行，下一个单词下拉到下一行。

<div class="cont">

    <div>
        <h3>heading</h3>
        <input type="submit" id="edit-remove" value="remove room" class="form-submit">
    </div>

    <div class="clear"></div>

    <div>
        <h3>heading</h3>
        <a href="#">remove room</a>
    </div>

    <div class="clear"></div>

</div>

CSS：

.clear 
    clear: both;


h3 
    float: left;


a, input 
    float: left;
    display: inline;


.cont 
    background: grey;
    width: 141px;

【问题讨论】：

哇。嗯。代码示例，好吗？我不明白您必须使用什么...您使用的是 <input type="submit"/>，您希望它位于标题元素之后的下一行？

【参考方案1】：

我认为这对于<input type="submit"/> 上的value 属性是不可能的，因为不仅文本而且整个按钮都需要换行。无法想象这应该如何工作。 （当然，按钮内可以有换行符：How to wrap text of html button with fixed width）。

但是您可以在 <a/> 上执行此操作，方法是同时显示标题和锚点 inline 而无需浮动它们：

h3, a 
    display: inline;

Here is a demo.