text wrap inside a button

Question

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>

Not reproduceable. The behavior described in the text of the question depends on settings that are not included in the code, probably a very large font size, possibly `overflow` setting too. The title of the question is “text wrap inside a button”, but text wrapping is not mentioned at all in the question. Do you actually *want* the text to wrap, e.g. so that “Register” appears below “Login/” if needed? — Jukka K. Korpela, Oct 11 '13 at 05:45
Only these lines of code (what you shared in post) is using for button styling or the buttons also inheriting from others CSS? — Hanif, May 13 '18 at 18:12

score 3 · Answer 1 · answered Aug 06 '20 at 08:11

3

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

answered Aug 06 '20 at 08:11

Lukas Coorek

187
1
11

5

your answer could be better with some little of explanation – DaFois Aug 06 '20 at 11:05

score 1 · Answer 2 · answered Apr 15 '19 at 15:19

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.

score 0 · Answer 3 · answered Oct 11 '13 at 03:41

0

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;
    }
}

answered Oct 11 '13 at 03:41

Kevin Pei

5,800
7
38
55

This didn't work. As for the height, i have it specified at the certain height because it's the size i want the button to be. – Anuj Hari Oct 11 '13 at 03:48
I don't understand how you want to text to go then. Do you want there to be an ellipsis at the end? The text to cut off like it currently is? Also can you please provide a link so we can reproduce the problem and mess around with it. – Kevin Pei Oct 11 '13 at 03:55
2

`word-wrap: break-word` breaks words, e.g. “Register” to “R” and “egister”. It does *not* perform hyphenation or break strings at permissible break points only. – Jukka K. Korpela Oct 11 '13 at 05:49
@JukkaK.Korpela This seems to be the only possible solution with the limited knowledge I have of AnujHari's situation. Clearly, there aren't any spaces in "Login/Register" to have the entire word wrap to a new line – Kevin Pei Oct 11 '13 at 14:44
3

You can add a space there, or a `` tag, if that’s the issue. But we really don’t know what the real problem is. Breaking words is almost a wrong solution, however, whatever the problem might be. – Jukka K. Korpela Oct 11 '13 at 16:10

text wrap inside a button

3 Answers3