Как сделать <span> внутри дисплея <a> в той же строке?

Question

У меня есть этот код here, чтобы создать облако тегов, теги <a> и внутри него. Я вставляю промежуток с подсчетом тега внутри него.

Я хочу, чтобы они всегда были вместе, но в некоторых случаях линия ломается, хотя у меня есть «дисплей: встроенный», установленный для <a> на всякий случай, но все же он не работает.

Answer 1

Как a, так и span элементы являются встроенными по умолчанию. Ваша проблема в том, что встроенные элементы обернуты словами, и это работает за слово, а не за элемент.

Либо отключить перенос слов с помощью white-space: nowrap или сделать внешний элемент display: inline-block, чтобы он был завершен как полный элемент.

Answer 2

Вы хотите добавить white-space:nowrap; в свой css. Это сообщает браузеру об отключении любого текстового переноса внутри элемента.

Обновлено скрипку: http://jsfiddle.net/k4u8U/3/

Answer 3

Вам нужно добавить white-space:nowrap к элементу.

См модифицированного примера http://jsfiddle.net/k4u8U/4/

Answer 4

Либо добавить display:inline-block; или white-space:nowrap; в свой CSS для a тега.

Вот 2 обновляемые jsfiddles: с display:inline-block; http://jsfiddle.net/k4u8U/5/

с white-space:nowrap; http://jsfiddle.net/k4u8U/6/