0

Вылазит длинный текст....

Изображение

Пробовал white-space: normal, но тогда строка начинается с абзаца, а мне нужно чтобы текст был вряд и не вылазил...

Сам код:

<select size="1" autocomplete="shipping country" data-backup="country" class="field__input field__input--select" aria-required="true" name="order_delivery_method" id="checkout_shipping_address_country">
  <option>Новая Почта (Оплата при получении 1233333333333)</option>
  <option>Новая Почта (Полная предоплата)</option>
  <option>Новая Почта (Частичная предоплата)</option>
</select>
Alex
  • 6,488
Василий Пупкин
  • 7
  • Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. – Alex Nov 26 '17 at 21:05
  • Вообще ничего не понять. Кода нет, данных нет, текст не вмещается в блок или в input таблицы стилей заданы или нет. Если родитель ограничен по ширине то текст длиннее родителя не войдет. – Ruslan Semenov Nov 26 '17 at 21:06
  • @Alex добавил код! – Василий Пупкин Nov 26 '17 at 21:08
  • @RuslanSemenov добавил код! – Василий Пупкин Nov 26 '17 at 21:08
  • @ВасилийПупкин в добавленном коде проблема не наблюдается. добавьте больше информации, чтобы воспроизвести Вашу проблему. предполагаем, что Вы используете плагин. – Alex Nov 26 '17 at 21:12
  • Спасибо, но что именно нужно? У меня все поместилось. Какие стили? – Ruslan Semenov Nov 26 '17 at 21:12
  • @Alex собственно вот сайт: http://185.185.69.207/cart2.php?action=confirm, и там как видно текст вылазит... – Василий Пупкин Nov 26 '17 at 21:14
  • @RuslanSemenov собственно вот сайт: http://185.185.69.207/cart2.php?action=confirm, и там как видно текст вылазит... – Василий Пупкин Nov 26 '17 at 21:15
  • Не стоит дублировать для нас ответы. А так, сократите option в две строки он не формируется, или измените на group – Ruslan Semenov Nov 26 '17 at 21:16
  • @RuslanSemenov спасибо, но можно, пожалуйста, подробнее? Если Вы имеете ввиду сократить сам текст с переносом на новую строку то не получится ибо текст берется из бд. – Василий Пупкин Nov 26 '17 at 21:18
  • @ВасилийПупкин Вам так нужно сделать http://prntscr.com/hflo56 ? – Alex Nov 26 '17 at 21:24
  • @Alex дааа, именно так, только если можно чуть-чуть левее. – Василий Пупкин Nov 26 '17 at 21:25
  • @ВасилийПупкин что значит чуть-чуть левее ? больше обрезать текст справа? – Alex Nov 26 '17 at 21:27
  • Возможно я не понял, что нужно, я так понял, что длинный текст невозможно прочитать, а не вместить. – Ruslan Semenov Nov 26 '17 at 21:28

2 Answers2

2

Добавьте правило:

.floating-labels .field--show-floating-label .field__input{
   padding-right: 40px;
}
Alex
  • 6,488
  • это нужно найти класс .floating-labels .field--show-floating-label .field__input{ и добавить туда паддинг или же создать класс? – Василий Пупкин Nov 26 '17 at 21:28
  • либо найти это правило и добавить в него либо в конец файла стилей добавить данное правило – Alex Nov 26 '17 at 21:31
  • посмотрите как на телефонном экране вылазит option, разве так и должно быть? http://webmark.com.ua/mobile/?url=http%3A%2F%2F185.185.69.207%2Fcart2.php%3Faction%3Dconfirm – Василий Пупкин Nov 26 '17 at 21:33
  • @ВасилийПупкин вы с телефона посмотрите – Alex Nov 26 '17 at 21:34
  • с телефона нет возможности, по этому приходится использовать сервис webmark – Василий Пупкин Nov 26 '17 at 21:36
  • @ВасилийПупкин при просмотре с телефона наверняка Вас не вылезет текст справа от телефона :) а если серьезно, на телефоне своя стилизация селекта и весь текст виден и помещается. – Alex Nov 26 '17 at 21:42
  • насмешили :) спасибо вам большое, пожалуйста, подскажите ещё как убрать этот отступ? чтобы я не создавал новый топик да и мне нелья http://prntscr.com/hflxcl – Василий Пупкин Nov 26 '17 at 21:44
  • @ВасилийПупкин это не отступ, это пустое пространство. прижмите футер к низу страницы. – Alex Nov 26 '17 at 21:47
1

Вот как пример, использования вместо select option

body {
  background: skyblue;
}

div {
  background: white;
  max-width: 200px;
}
<div>

  <input type="radio" name="delivery" value="val1"> Очень длинный текст с описанием, и всем, что вашей деше угодно. Лорем тут жалко не поддерживается :)<br>
  <input type="radio" name="delivery" value="val2"> Второй<br>
  <input type="radio" name="delivery" value="val3"> Третий<br>

</div>
Ruslan Semenov
  • 3,651