текст обертывание внутри кнопки

Question

У меня есть 4 a -tags. Все в каждом из CSS работает. Он отлично меняет размеры кнопок на моем телефоне. Единственная проблема, с которой я столкнулся, - это мой телефон, кнопка входа/регистрации, текстовые сокращения внутри кнопки и все, что она показывает, - это логин/регистрация.

Из того, что я помню white-space: normal, это способ сделать это, но, возможно, я ошибаюсь.

@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>

Answer 1

Я считаю, что вы используете word-wrap: break-word;. Кроме того, удалите ограничения height - это просто вызовет проблемы с переполнением текста при переносе слова в новую строку.

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

Также вы, кажется, используете свои классы по-настоящему странно. Разве вы не должны назначать эти классы как id и давать всем кнопкам один класс button? 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; 
    } 
}