CSS - подчеркивать текст, но игнорировать пробелы

У меня есть пара ссылок с левым отступом в 3 пикселя. Эти ссылки подчеркнуты и выглядят следующим образом:

<a href='#'>
    test
</a>

К сожалению, внутри ссылки есть пробелы, и я не могу удалить эти пробелы, так как у меня нет доступа к HTML-коду. Эти пробелы также подчеркнуты, что меня не устраивает. Есть ли способ удалить их без изменения HTML?

Вот скрипт, который показывает мою проблему: http://jsfiddle.net/e8quz/

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


css space underline
person Matt3o12    schedule 20.04.2014    source источник
comment
не думайте, что вы можете сделать это, не удаляя фактические пробелы или не редактируя html другим способом.   -  person MightyPork    schedule 20.04.2014
comment
Итак, вы хотите скрыть исходный HTML-код и отобразить другой HTML-код с заданным форматированием... верно? Как вы получаете доступ к исходному HTML?   -  person TimSPQR    schedule 20.04.2014

Ответы (3)


arrow_upward
6
arrow_downward

Пробелы возникают из-за разрывов строк (хорошо известных из проблемы display:inline-block).

Так что сделайте ваши a элементы display: block и переместите их влево.

ДЕМО

PS: display:block является «избыточным», так как float обычно уже устанавливает для свойства отображения соответствующего элемента значение «блок». Но это не навредит...!

person Netsurfer    schedule 20.04.2014
comment
просто установка display:inline-block прекрасно работает. Использование float иногда не подходит. - person King King; 20.04.2014
comment
@KingKing Да, как всегда в веб-дизайне - это зависит! Но имейте в виду, что это дает не тот же результат. Использование display:inline-block дает вам дополнительное пространство (в зависимости от соответствующей разметки). - person Netsurfer; 20.04.2014
comment
не могли бы вы сделать какую-нибудь скрипку, показывающую, что display:inline-block потерпит неудачу? потому что для HTML-кода OP это работает. - person King King; 20.04.2014
comment
Вот случай, показывающий, что использование float на самом деле не подходит jsfiddle.net/viphalongpro/e8quz/3 , а при использовании display:inline-block мы получим ожидаемый результат jsfiddle.net/viphalongpro/e8quz/4 - person King King; 20.04.2014
comment
@KingKing Нет, ты меня неправильно понял. Это не терпит неудачу. Это просто дает вам (немного) другой результат, так как разрывы строк вызовут дополнительное пространство. Это все, что я имел в виду. ;-) - person Netsurfer; 20.04.2014
comment
@KingKing Конечно, вы можете создать сотни вариантов использования, где требуется любой другой CSS. Но здесь мы говорим о данной разметке (по ОП), и у меня нет доступа к HTML-коду, что делает маловероятным, что решение с плавающей запятой не сработает в его случае. И есть также случаи использования, когда все наоборот, когда метод display: inline-block имеет нежелательные побочные эффекты. - person Netsurfer; 20.04.2014

arrow_upward
2
arrow_downward

См. здесь: http://jsfiddle.net/BWc2U/2/

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

a {
  margin-left: 5px;
  display: inline-block;
}
person JohanVdR    schedule 20.04.2014
comment
Я знаю об этом, и я указал на это в своем вопросе: внутри ссылки есть пробелы. Проблема в том, что я не могу изменить HTML, как это сделали вы. У меня просто есть доступ к файлам CSS. - person Matt3o12; 20.04.2014

arrow_upward
1
arrow_downward

Вы можете просто перемещать ссылки, чтобы пробел исчез, не редактируя html.

a {
    margin-left: 5px;
    float: left;
}

http://jsfiddle.net/e8quz/2/

person Anshul Sao    schedule 20.04.2014