سؤال

Can the CSS word-wrap: break-word be applied to an <input/> of type submit?

Ive applied that css but its not doing anything which isnt what i expected. Im trying to make my submit input wrap around a heading that comes before it.

For this fiddle, can the input or link wrap the heading? So I want the first word of the button and link to be on the same line as the heading and the next word to drop down to the next line.

<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;
}
هل كانت مفيدة؟

المحلول

I think this is not possible for the value attribute on <input type="submit"/>, because not only the text but the whole button would need to break the line. Cannot imagine how this should work. (Of course, inside the button you can have line breaks: How to wrap text of html button with fixed width).

But you can do this on <a/> by displaying both the headline and the anchor inline without floating them:

h3, a {
    display: inline;
}

Here is a demo.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top