CODEWITHSUNDEEP
htmlcss
FuSan
FuSan

Reputation: 49

Can I make the text in the button to use line break

How can I make the button text to be shown in multiple lines if users screen is smaller than the text size.

As it stands now If a user has screen with low width some text goes missing from screen.

    .column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      height: 42px;
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

Upvotes: 1

Views: 61

Answers (4)

Suhani Aneja
Suhani Aneja

Reputation: 1

use the below css to wrap the text and need to adjust the height and width accordingly.

white-space: pre-wrap; /* css-3 */    
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */    
white-space: -o-pre-wrap; /* Opera 7 */    
word-wrap: break-word; /* Internet Explorer 5.5+ */

Upvotes: 0

Mehraj Khan
Mehraj Khan

Reputation: 977

simply use Flex property to the button class Example

a.btn { display: flex; justify-content: center; }

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Add height:auto to btn class

.column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      height: auto;
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

Upvotes: 3

josephting
josephting

Reputation: 2665

Since the .btn class has a fixed height of 42px, new line will not be shown as it will overflow out of the element. You can remove the height attribute from your CSS and simply use <br> like so.

    .column {
      box-sizing: inherit;
      display: inline-block;
      margin-bottom: 0em;
      margin-top: 0em;
      vertical-align: middle;
      width: 100%;
    }
    
    .margin-top {
      margin-top: 1.6rem;
    }
    
    .centered {
      box-sizing: inherit;
      text-align: center;
    }
    
    .btn {
      -webkit-tap-highlight-color: transparent;
      background-color: #00bd9a;
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
      box-sizing: inherit;
      color: white;
      cursor: pointer;
      display: inline-block;
      /*height: 42px;*/
      letter-spacing: 0.5px;
      line-height: 42px;
      pointer-events: all;
      position: relative;
      text-decoration-line: none;
      text-transform: uppercase;
      vertical-align: middle;
      width: 80%;
    }
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text<br>Here
      </a>
   </div>
</div>

Upvotes: 0

Related Questions