CODEWITHSUNDEEP
htmlcssword-wrap
Anuj Hari
Anuj Hari

Reputation: 543

text wrap inside a button

I have 4 a-tags. Everything in each of the CSS works. It resizes the buttons perfectly on my phone. The only problem I have is on my phone, for the login/register button, the text cuts of inside the button and all it shows is login/register.

From what I recall white-space: normal is the way to do this, but maybe I am wrong.

@media only screen and (max-device-width: 480px) {
  .newsButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: left;
  }
  
  .venueButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: right;
  }
  
  .learnButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: left;
  }
  
  .loginButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: right;
  }
}
<a href="menu.php" class="newsButton" data-role="button" data-theme="e">News</a>
<a href="venue.php" class="venueButton" data-role="button" data-theme="e">Venue Hire</a>
<a href="learn.php" class="learnButton" data-role="button" data-theme="e">Learn</a>
<a href="login.php" class="loginButton" data-role="button" data-theme="e">Login/Register</a>

Upvotes: 9

Views: 37425

Answers (3)

Lukas Coorek
Lukas Coorek

Reputation: 227

.custom-btn{
    display: inline-block;
    width: 49%;
    height: auto;
    white-space: normal;
    text-align: left;
    padding: 16px;
}

Upvotes: 3

gilbert-v
gilbert-v

Reputation: 1305

The issue is: a tags are display: inline by default. word-wrap: break-word doesn't work on any element that isn't display: inline-block or display: block (see this).

As a result, you must your button like so

.button {
  // ...
  display: inline-block;
  word-wrap: break-word;
  // ...
}

Hope this helps.

Upvotes: 1

Kevin Pei
Kevin Pei

Reputation: 5872

I believe you use word-wrap: break-word;. Also, remove the height restrictions - it'll just cause weird text overflow issues when the word wraps to a new line.

@media only screen and (max-device-width: 480px) {
.newsButton{
    width:49%;
    word-wrap:break-word;
    float: left;
}

.venueButton{
    width:49%;
    word-wrap:break-word;
    float: right;
}

.learnButton{
    width:49%;
    word-wrap:break-word;
    float: left;
}

.loginButton{
    width:49%;
    word-wrap:break-word;
    float: right;
}
}

Also you seem to be using your classes in a really odd fashion. Shouldn't you be assigning those classes as id's and giving all the buttons one button class like so? HTML

<a href="menu.php" id="newsButton" class="button" data-role="button" data-theme="e">News</a>
<a href="venue.php" id="venueButton" class="button" data-role="button" data-theme="e">Venue Hire</a>
<a href="learn.php" id="learnButton" class="button" data-role="button" data-theme="e">Learn</a>
<a href="login.php" id="loginButton" class="button" data-role="button" data-theme="e">Login/Register</a>

CSS:

@media only screen and (max-device-width: 480px) {
    .button{
        width:49%;
        word-wrap:break-word;
        float: left;
    }
}

Upvotes: 0

Related Questions