Clever Geek Handbook

Text overflowing from html button seems to be in contrast to applied style

I just can't figure out why the text of this button doesn't wrap to the next line. Instead, it ends at the end. Here's the style:

#find-attach-all-content-container input[type="button"] {
    width: 60px;
    height: 60px;
    background-color: #fd902a;
    color: #fff;
    padding: 5px;
    position: absolute;
    left: -10px;
    top: -20px;
    font-size: 14px;
    line-height: 15px;
    overflow: visible;
    text-align: center;
    border: solid #b6b6b6 1px;
}

Here is the html:

<input type="button" class="attach-btn" value="Attach to Response" onclick="postConditionFindCure( <?php echo get_the_ID() ?> );">
+3


source to share


3 answers


You must add:

white-space: normal;


The default value for white-space

is not set to wrap input elements.

+2


source


overflow: visible

will work with text only if the container element has no static one height

.

Also, you will need to overwrite the default white-space

by setting it to normal

, otherwise the text will be wrapped at the end of its container element.

So, you will need to change your styles by removing height

and installing white-space

:

#find-attach-all-content-container input[type="button"] {
    width: 60px;
    /* height: 60px; */
    background-color: #fd902a;
    color: #fff;
    padding: 5px;
    position: absolute;
    left: -10px;
    top: -20px;
    font-size: 14px;
    line-height: 15px;
    overflow: visible;
    text-align: center;
    border: solid #b6b6b6 1px;
    /* Added */
    white-space: normal;
}


Demo

CSS-Tricks: Overflow

W3C

0


source


You can use carriage return characters to break the line: 

<input type="button" value="Really&#x00A;Tall&#x00A; Button">
-1


source






More articles:


All Articles