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

Имею 4 a-тега. Все в каждом из 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>


html css word-wrap
person Anuj Hari    schedule 11.10.2013    source источник
comment
Не воспроизводится. Поведение, описанное в тексте вопроса, зависит от настроек, которые не включены в код, возможно, очень большого размера шрифта, возможно, и настроек overflow. Заголовок вопроса: «Перенос текста внутри кнопки», но перенос текста в вопросе вообще не упоминается. Вы действительно хотите обернуть текст, например чтобы «Регистрация» отображалась под «Логином /», если необходимо?   -  person Jukka K. Korpela    schedule 11.10.2013
comment
Только эти строки кода (которыми вы поделились в сообщении) используются для стилизации кнопок или кнопок, также унаследованных от других CSS?   -  person Hanif    schedule 13.05.2018

Ответы (3)


arrow_upward
1
arrow_downward

Проблема в следующем: теги a по умолчанию равны display: inline. word-wrap: break-word не работает ни с одним элементом, кроме display: inline-block или display: block (см. this).

В итоге надо вашу пуговицу вот так

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

Надеюсь это поможет.

person gilbert-v    schedule 15.04.2019

arrow_upward
0
arrow_downward

Я считаю, что вы используете 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;
    }
}
person Kevin Pei    schedule 11.10.2013
comment
Это не сработало. Что касается высоты, я указал ее на определенной высоте, потому что это размер, который я хочу, чтобы кнопка была. - person Anuj Hari; 11.10.2013
comment
Тогда я не понимаю, как ты хочешь отправить СМС. Вы хотите, чтобы в конце было многоточие? Текст, который нужно обрезать, как сейчас? Также не могли бы вы предоставить ссылку, чтобы мы могли воспроизвести проблему и решить ее. - person Kevin Pei; 11.10.2013
comment
word-wrap: break-word разбивает слова, например «Зарегистрируйтесь» в «R» и «egister». Он не выполняет расстановку переносов и разрыв строк только в допустимых точках останова. - person Jukka K. Korpela; 11.10.2013
comment
@ JukkaK.Korpela Это кажется единственно возможным решением с ограниченными знаниями о ситуации с АнуджХари, которые у меня есть. Ясно, что в Login / Register нет пробелов для переноса всего слова на новую строку - person Kevin Pei; 11.10.2013
comment
Вы можете добавить туда пробел или тег <wbr>, если это проблема. Но мы действительно не знаем, в чем настоящая проблема. Однако разрыв слов - это почти неправильное решение, какой бы ни была проблема. - person Jukka K. Korpela; 11.10.2013

arrow_upward

arrow_downward

person    schedule
comment
ваш ответ мог бы быть лучше с небольшими пояснениями - person DaFois; 06.08.2020