Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Перенос текста на новую строку: теряется padding в местах разрыва / 8 сообщений из 8, страница 1 из 1
11.07.2014, 19:24
    #38694734
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
При переносе текста на новую строку теряется отступ и теряется левое выравнивание:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
</head> 
<body>
<div style="width: 220px; text-align: left;">

    <span style="padding: 0 10px; background: red;">
        Текст переносится на новую строку и теряет левый отступ. В результате теряется левое выравнивание
    </span>

</div>
</body> 
</html>


Можно ли решить эту проблему ?
...
Рейтинг: 0 / 0
11.07.2014, 19:32
    #38694735
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
Поля вокруг надписи необходимы для визуального выделения ссылки при наведении на неё мыши.
Если ссылка умещается в одну строку, при наведении на неё мыши вокруг неё появляется красное выделение.
Но если ссылка не умещается в одну строку, она переносится при этом вторая строка расположена левее первой.

Ссылку можно представить в виде [display: block] или [display: inline-block], то отступы будут во всех стоках, но в этом случае выделение по ширине займёт всю ширину внешнего контейнера. Если при этом сделать эту блок-ссылку плавающей [float: left], то в случае переноса она по-прежнему будет занимать всю ширину внешнего контейнера. Т.е. [display: block] или [display: inline-block] проблему не решают.
...
Рейтинг: 0 / 0
11.07.2014, 20:00
    #38694744
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
Cyrax_02Ссылку можно представить в виде [display: block] или [display: inline-block], то отступы будут во всех стоках, но в этом случае выделение по ширине займёт всю ширину внешнего контейнера.
Выделение занимает (внезапно!) ровно столько, сколько размера у блока с текстом.
Надо, чтоб блок отступал от своего внешнего контейнера? Ставьте margin вместо padding.
...
Рейтинг: 0 / 0
11.07.2014, 22:01
    #38694789
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
авторВыделение занимает (внезапно!) ровно столько, сколько размера у блока с текстом.Неа. Так будет только в 2 случаях:
а) [display: inline-block]
б) [display: block] + [float: left или right]

Если текст имеет [display: block] и не является плавающим, то блок-текст будет занимать всю доступную ширину (исключение - перенос текста, см.ниже).

авторНадо, чтоб блок отступал от своего внешнего контейнера? Ставьте margin вместо padding. По краям текста (не зависимо от того, отображается она встроенной или блочной) должен быть именно padding, чтобы background этого текста давал прямоугольное выделение.
В случае, когда текст отображается как встроенный элемент, при переносе текста в местах разрыва теряется padding и как следствие, строки оказываются сдвинуты (первая строка начинается правее, остальные - левее).
В случае, когда текст отображается как блок, при переносе текста этот блок занимает всю доступную ширину, даже при [display: inline-block] и [float: left]
...
Рейтинг: 0 / 0
12.07.2014, 13:52
    #38694940
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
Cyrax_02Если текст имеет [display: block] и не является плавающим, то блок-текст будет занимать всю доступную ширину (исключение - перенос текста, см.ниже).
Я вам именно об этом и написал выше.

Cyrax_02По краям текста (не зависимо от того, отображается она встроенной или блочной) должен быть именно padding, чтобы background этого текста давал прямоугольное выделение.
Попробуйте сначала прочитать, что вам пишут. И сделать так, как пишут. Display: inline-block и выставление margin вместо padding делают именно то, что вам нужно.

А еще (и я, увы, абсолютно серьезен) попробуйте прочитать книжку-две по верстке HTML. Ваши вопросы, включая этот, очень напоминают попытки работать со сложной техникой методом "тыка". "Я нажал на эти красивые кнопочки, но не работает! Почему?". "А еще я нажал вот на эти красивые кнопочки, и хочу, чтоб у меня сварилось кофе, но не варится! Почему?". "Что на приборе написано? Син-хро-фа-зо-трон, а зачем вы спрашиваете?".
...
Рейтинг: 0 / 0
12.07.2014, 14:27
    #38694955
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
Не нужно выёживаться. Мой вам совет.
Мои вопросы корректны и полностью соответствуют всем правилам форума. Знаете решение и имеете желание его изложить - делайте это без гонора. Желаете померяться своей репой - участвуйте в научных конференциях и дискуссиях, пишите научные статьи. Если что-то имеете личное - такие вопросы предпочитаю решать реально, а не виртуально.
...
Рейтинг: 0 / 0
12.07.2014, 15:06
    #38694980
Feg16
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
Cyrax_02такие вопросы предпочитаю решать реально, а не виртуально.Быстро бегаешь? :)
...
Рейтинг: 0 / 0
12.07.2014, 16:10
    #38695014
Cyrax_02
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Перенос текста на новую строку: теряется padding в местах разрыва
Feg16Быстро бегаешь? :)Метко стреляю :)
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Перенос текста на новую строку: теряется padding в местах разрыва / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]