Как избежать подчеркивания пробелов без изменения стиля кодирования?

Взгляните на следующую скрипку:

http://jsfiddle.net/DNhAk/14/

Если у вас есть изображение с текстом, завернутым в привязку /ссылку, пробел между изображением и текстом в коде создает подчеркнутый пробел на отображаемой странице прямо перед текстом.

Когда изображение отсутствует, подчеркнутые пробелы отсутствуют, хотя в коде есть пробелы.

Единственный способ избежать этого подчеркнутого пробела - это устранить пробел в моем коде. Но я ненавижу изменять свой стиль кодирования, чтобы изменить представление отрисованной страницы. В любом случае, изменение HTML-кода для манипулирования представлением страницы в любом случае неверно. Это похоже на использование разрывов строк (<br/>) для добавления пробела между элементами вместо использования CSS.

Существует ли не столь очевидное для меня свойство CSS, которое используется для решения этой проблемы?

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

10 голосов | спросил Jake Wilson 17 PMpTue, 17 Apr 2012 22:03:53 +040003Tuesday 2012, 22:03:53

6 ответов


0

Вы можете эмулировать эффект с помощью некоторого CSS:

img {
    border: 1px solid #CCC;
    padding: 10px;
    vertical-align: middle;
    float:left;
}

a {
    display:block;
    height:70px;
    line-height:70px;
}

http://jsfiddle.net/DNhAk/8/

ответил AlienWebguy 17 PMpTue, 17 Apr 2012 22:20:43 +040020Tuesday 2012, 22:20:43
0

Поведение, которое вы испытываете, является частью спецификации ( http: //www .w3.org /TR /html401 /struct /text.html ):

  

Для всех элементов HTML, кроме PRE, последовательности пробелов разделяют «слова» (здесь мы используем термин «слово» для обозначения «последовательностей непробельных символов»). При форматировании текста пользовательские агенты должны идентифицировать эти слова и размещать их в соответствии с соглашениями конкретного письменного языка (сценария) и целевого носителя.

     

Этот макет может включать размещение пробела между словами (называемое межсловным пространством), но соглашения для межсловного пространства варьируются от сценария к сценарию. Например, в латинских сценариях межсловное пространство обычно отображается как ASCII space (), а в тайском это разделитель слов нулевой ширины (). В японском и китайском межсловное пространство обычно вообще не отображается.

Итак, добавив элемент (img), за которым следует пробел (новая строка) в вашей разметке, вы поручили агентам интерпретировать ваше изображение как «слово» и добавьте пробел в соответствии с языком, на котором установлен агент. Если Вы хотите удалить этот пробел из результата, вам нужно удалить его из разметки.

Кроме того, вы можете полностью удалить изображение из вашей разметки и вместо этого поместить его в качестве фона на якорь, исключив при этом все фрагменты презентации из вашей разметки. Пример здесь:

<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>

CSS

.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}

Конечно, у этого метода есть некоторые недостатки, но это потенциальное решение в зависимости от других ограничений.

http://jsfiddle.net/hellslam/pvHK8/

ответил hellslam 19 PMpThu, 19 Apr 2012 19:01:33 +040001Thursday 2012, 19:01:33
0

это ожидаемое поведение, так как после изображений есть пробелы: Вы должны изменить структуру HTML, используйте вместо этого:

<a href='#'>
<img src='SoccerBall.jpg'/> <span>Your text</span>
</a>

CSS:

a{text-decoration:none;}
a>span{text-decoration:underline;}
ответил amd 17 PMpTue, 17 Apr 2012 22:24:37 +040024Tuesday 2012, 22:24:37
0

Избавьтесь от места в привязке между изображением и текстом (это то, что подчеркивается). В вашем css укажите img 'margin-right: 10px' (или любое другое значение). Снимите обивку.

ИЗМЕНИТЬ

Чтобы уточнить:

Вставка пробела после того, как изображение не попадает под «стиль кодирования» - вы специально кодировали пробел в текстовое значение привязки.

CSS ведет себя так, как задумано в этом отношении: он стилизует текстовое содержимое якоря (включая пространство) с подчеркиванием, потому что вы не изменили это поведение для текстового содержимого в якоре.

Удаляя пробел, вы не изменяете свой стиль кодирования, вы изменяете контент. Случилось так, что это устранит проблему стилей, с которой вы столкнулись.

Я понимаю, что вы спрашиваете, есть ли способ сохранить пространство в якоре, а также нацелить этот символ с помощью CSS - я не думаю, что есть способ сделать это.

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

На самом деле, я подозреваю, что намерение этого космического символа больше ориентировано на представление, чем на семантику.

Изменение HTML в целях презентации не является идеальным, но, как правило, речь идет не об изменении вашего HTML как такового, а об изменении значения , которое вы передаете с помощью HTML . В этом случае я считаю, что совершенно правильно изменить ваш HTML, чтобы передать то же значение .

Бывают случаи, когда вы изменяете документ в соответствии с вашими семантическими потребностями и вашими потребностями в стиле - если вы передаете одно и то же значение и логический поток информации, это на самом деле не является проблемой для потребителя содержание.

ответил 17 PMpTue, 17 Apr 2012 22:28:33 +040028Tuesday 2012, 22:28:33
0

Я, конечно, согласен с вашим вопросом и считаю, что он хорошо продуман и поднимает очень хороший вопрос. Как указано в этом SO вопросе , существует экспериментальное свойство CSS3 под названием text-space-collapse с предлагаемыми значениями ---- +: = 0 =: + ----, которые могут быть использованы для решения этой проблемы.

Я думаю, что лучшее решение, которое вы найдете, пока не будет реализовано discard, trim-inner, trim-before and trim-after, - это слегка изменить вашу разметку. Вы можете обернуть текст в промежуток, а затем использовать text-space-collapse в качестве одного решения.

http://jsfiddle.net/CPh82/

display: table
ответил mrtsherman 19 PMpThu, 19 Apr 2012 17:32:27 +040032Thursday 2012, 17:32:27
0

вместо дополнения попробуйте поле

img {
    border: 1px solid #CCC;
    margin: 10px;
    vertical-align: middle;   
}​
ответил ramcal 17 PMpTue, 17 Apr 2012 22:11:34 +040011Tuesday 2012, 22:11:34

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132