Переполнение текста слева направо

Question

Я показываю адрес электронной почты под полем формы.Мне нужно, чтобы адрес был выровнен по левому краю поля формы.Однако, когда адрес очень длинный, вместо того, чтобы проходить через конец поля формы, я хочу, чтобы адрес переполнялся влево, выравниваясь по правому краю с полем.

Можно предоставить пример изображения.

Answer 1

То, что вы ищете, это свойство CSS word-wrap .

Перенос слов позволяет принудительно переносить длинный (непрерывный) текст на новую строку. Он обычно используется для предотвращения переполнения длинных URL-адресов узкой области содержимого (например, боковой панели на веб-сайте или в комментариях к блогу).

Например, вы можете использовать его для предотвращения выхода текста за пределы области и, возможно, нарушения макета:

Чтобы использовать word-wrap, укажите word-wrap: normal или word-wrap: break-word.

.email-address {
    word-wrap: break-word;
}

Обычный означает, что текст будет выходить за пределы родительского элемента. Разрывное слово означает, что текст будет перенесен на следующую строку.

Для вашей ситуации вот jsFiddle с базовым примером того, как вы могли бы реализовать свою идею.

Чтобы адрес электронной почты выровнялся по левому или правому краю в зависимости от его длины, вам потребуется немного JavaScript.

Тем не менее, перенос слов поддерживается в IE 5.5+, Firefox 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+.

Answer 2

Вы можете попробовать:

mySelector
{
    word-wrap: break-word;
}

Это говорит о том, что выбранный вами элемент разбивает слова, когда они попадают на боковую сторону элемента. Не уверен в поддержке браузера.

Answer 3

Обработка ответа Кайла, если вы поместите текст своего адреса электронной почты в элемент block , присвойте ему фиксированную ширину, равную ширине элемента ввода, и установите word-wrap:break-word;, он будет работать. Это CSS3, но он работает еще в IE5. HTML:

<input type="text">
<span class="email">
  thisisareallylongemailthatwillprobablyoverflow@myreallylonginternetserviceprovider.superlongandimpossibletopleveldomain
</span>

CSS:

input {
    width:150px;   
}
span.email {
    width:150px;
      word-wrap:break-word;
}

Пример