Текст в div не переносится - PullRequest
Новая
       7

Текст в div не переносится

0 голосов
/ 03 сентября 2018

На этой странице есть div (class = "controls"), которые содержат поля ввода и текст справки, заключенный в промежутки (class = "help-block").

Пример: 

<div class="text-line control-group ">
    <label class="control-label" for="pdb-email">Email<span class="reqd">*</span></label>
    <div class="controls">
        <input name="email" id="pdb-email" type="text" class="required-field regular-text" value="" data-cip-id="pdb-email">
        <span class="help-block">What is your email address? Make sure it's one you actually check please!</span>
    </div>
</div>

.control-label,
table th,
.required-field {
    color: #fff;
}
input[type=text] {
    width: 100%;
}
textarea {
    width: 100%;
}

При изменении размера экрана для мобильных устройств текст справки в диапазонах не переносится. Отрезано.

Как мне его обернуть?

Другие вещи, которые нужно знать:

  1. Соответствующий HTML выводится из скрипта (плагин WordPress), я не могу редактировать
  2. Я использую этот же плагин здесь . HTML является то же самое, но у меня нет проблемы там - это работает отзывчиво.

  3. Другие вещи, которые я пробовал, но не решали проблему:

    • word-wrap: break-word; на уровнях div и body 

    • @media only screen and (max-width: 375px) {
    .controls {
        max-width: 100%;
        word-wrap: break-word;
    }
}

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Общий ответ здесь заключается в том, что вам нужно проверить HTMl с помощью инструментов разработчика браузера, чтобы увидеть, какие правила CSS влияют на отображение. Это может быть сложно, особенно в адаптивных дисплеях.

Я бы искал такие элементы, как метки или текст справки, которым дано правило "whitespace: nowrap". Например, похоже, что метки флажков могут выдвигать дисплей.

0 голосов
/ 03 сентября 2018

Тег ввода не должен автоматически переносить строки, вы можете использовать тег textarea или написать div в стиле, аналогичном вводу, используя contentEditable = "true" ... 

<textarea></textarea>
<div style="width:100px" contentEditable="true">coding</div>
...