Fit text inside a button

Question

Fit text inside a button

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

CSS I have a button that has a pretty long text:

When the screen changes size (becomes smaller), it hides part of the text:

The idea is to adjust the width and deploy in several lines (the ones you need) without hiding anything from the text, I do not know if I explain myself well. I have tried several CSS properties without success, I would appreciate a little help. Thanks

I tried the CSS property:

word-wrap: normal | break-word | initial | inherit;
display: inline | block | flex | inline-block | inline-flex | initial | inherit
overflow-x: visible | hidden | scroll | auto | initial | inherit

The text is inserted by jquery:

var texto = l.BTN_TEC;
texto += "<br /><h6 style='color: red; margin: 0;'> " + l.TEXT_BTN_TEC + "</h6>";
$("#showTecnicosBtn").html(texto);

javascript jquery html css

asked by tripossi 16.10.2017 в 17:16

source

2 answers

1

Try this,

Well I do not know how to write your style sheet but I dare to answer this question and I hope it works for you

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">

    @media(max-width:960px){
        .content {  
            width: 960px;
        }
    }

    @media(max-width:860px){
            .content {  
            width: 860px;
        }
    }

    .content {
        margin: 0 auto;
        text-align: center;

    }
</style>
</head>
<body>
    <div style="float: left;width: 100%;">
        <div class="content">
            <p>Show Techs</p>

            <p>Clearly print your name below ONLY if you have reviewthe information above and understand:</p>
            <p>1) The scope oif work</p>
            <p>2) The hazards to which you will be exposed and</p>
            <p>3) Te mitigations for those hazads</p>
        </div>
    </div>
</body>
</html>

Just use the media for each screen setting, I hope it works for you

answered by 16.10.2017 в 17:36

Get values from a table and convert it into an array Help to add an option to a menu

score 1 · Accepted Answer

I'll give you an example that you can copy so you can see with what property css you solve your problem:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
#b1{
    white-space: normal;
}
</style>
</head>
<body>
<button id='b1'>
    <p>Este es un texto largo que puede estar dentro del botón</p>
</button>
</body>
</html>

Regarding the size of the button if you wish, you use the Bootstrap framework to support you as to responsive so that your button adopts different sizes in terms of different device resolutions.