powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Перенос текста на новую строку: теряется padding в местах разрыва
8 сообщений из 8, страница 1 из 1
Перенос текста на новую строку: теряется padding в местах разрыва
    #38694734
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
При переносе текста на новую строку теряется отступ и теряется левое выравнивание:
Код: 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
Перенос текста на новую строку: теряется padding в местах разрыва
    #38694735
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Поля вокруг надписи необходимы для визуального выделения ссылки при наведении на неё мыши.
Если ссылка умещается в одну строку, при наведении на неё мыши вокруг неё появляется красное выделение.
Но если ссылка не умещается в одну строку, она переносится при этом вторая строка расположена левее первой.

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

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

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

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

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


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