Home / Questions / 109897
Accepted
tripossi
Asked: 2020-10-17 07:16:24 +0800 CST 2020-10-17 07:16:24 +0800 CST

Wrap text inside a button

  • 772

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

enter image description here

When the screen resizes (gets smaller), it hides some of the text:

enter image description here

The idea is that it adjusts to the width and unfolds in several lines (the ones you need) without hiding any of the text, I don't know if I'm explaining myself well. I've tried several CSS properties without success, I'd appreciate some help. Thank you

I have tried with CSS property:

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

I insert the text using jquery:

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

2 Answers

  1. Best Answer

    I leave you an example that you can copy so you can see with which css property 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 want, you can use the Bootstrap framework to support you in terms of responsiveness so that your button adopts different sizes in terms of different device resolutions.

    • 1

  2. try this,

    Well I don't know your way of writing 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, hope it works for you

    • 1