0

Есть кнопка, внутри нее текст. Так вот, как сделать так, чтобы длинный текст разместился так, чтобы не высовывался с правой стороны. Чтобы его обрезало на ширину кнопки.

     <button type="button" style="width: 100%; height: 100px; 
      float: left;  box-sizing: border-box;
      background-color: #ffffff; border-radius: 10px;   
      font-size: 30px; white-space: nowrap;"
      data-toggle="modal" data-target="#exampleModal">Tevhjjvjjvjvvjvjvjvvjyyvjvyjvyjvyjvyjvjvkkhkukuknknkubkuukkubkbbbkbukbkbkkuukbkuukukbkkbkukukukubkubxt
                    </button>

2 ответа 2

1

Чтобы обрезало, добавляем overflow: hidden;

     <button type="button" style="width: 100%; height: 100px; 
      float: left;  box-sizing: border-box;
      background-color: #ffffff; border-radius: 10px;   
      font-size: 30px; white-space: nowrap; overflow: hidden;"
      data-toggle="modal" data-target="#exampleModal">Tevhjjvjjvjvvjvjvjvvjyyvjvyjvyjvyjvyjvjvkkhkukuknknkubkuukkubkbbbkbukbkbkkuukbkuukukbkkbkukukukubkubxt
                    </button>

1

Есть ещё способ "красивой" обрезки текста, при помощи свойства text-overflow: ellipsis; которая добавит в конце ...(троеточие).
Так же, некоторые браузеры поддерживают кастомные символы у text-overflow (пример у кнопки ниже, обрежется с .. :3 в конце)

button {
  width: 100%;
  height: 100px;
  float: left;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;
  font-size: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.custom {
  text-overflow: '.. :3';
}
<button type="button" data-toggle="modal" data-target="#exampleModal">Tevhjjvjjvjvvjvjvjvvjyyvjvyjvyjvyjvyjvjvkkhkukuknknkubkuukkubkbbbkbukbkbkkuukbkuukukbkkbkukukukubkubxt</button>

<button type="button" class="custom" data-toggle="modal" data-target="#exampleModal">Tevhjjvjjvjvvjvjvjvvjyyvjvyjvyjvyjvyjvjvkkhkukuknknkubkuukkubkbbbkbukbkbkkuukbkuukukbkkbkukukukubkubxt</button>

2
  • Спасибо, красивый способ, а можно ли вместо троеточия вставлять box-shadow? 8 дек 2019 в 13:30
  • @ИльяКузьмич, увы, тут уже при помощи скрипта
    – De.Minov
    9 дек 2019 в 10:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.