Span width не работает

Для чего нужен тег span в HTML?

Приветствую вас, дорогой друг!
В этой статье речь пойдет про тег span в html для чего он нужен, какие имеет особенности и почему его так часто используют в современной вёрстке.

Навигация по статье:

Сфера применения этого тега довольно большая. По сути, он представляет собой пустой контейнер, в который можно поместить какой-то текст или изображение и задать им нужные CSS стили. Или же задать ему класс или идентификатор и использовать при написании скрипта.

Пример использования тега span в HTML:

При этом стили оформления мы можем задать как при помощи атрибута style, как в примере выше, так и присвоить тегу span отдельный CSS класс, а затем дописать стили в отдельном CSS файле.

CSS

Для чего нужен тег span в html?

1 Позволяет задать или изменить цвет, а так же тип шрифта и начертание для отдельного одного или нескольких слов или букв.

Основные особенности тега span в html:

1. 1 Он является строчным элементом и с его помощью можно задать стиль написания для одного слова или даже буквы.
2. 2 Не занимает всю ширину строки, как например div, p, h1-h6, а подстраивается под ширину слова или нескольких слов, которые в нём находятся.
3. 3 Поддерживается всеми браузерами, включая браузеры мобильных устройств.
4. 4 Так как это строчный элемент, то для него не работает вертикальные внешние отступы (margin), а так же выравнивание по центру с помощью margin:auto;
5. 5 Так же для span не работает CSS свойство width. Ширина подстраивается под количества текста внутри него.

Чем тег span отличается от div?

1. 1 Div является блочным элементом HTML, который используется для формирования структуры страницы, а тег span является строчным элементом и используется в основном для выделения и форматирования отдельных фрагментов текста.
2. 2 По умолчанию текст обтекает тег span, а не переходит на другую строку как в случае с div.
3. 3 Для span не работает вертикальный margin и margin:auto;
4. 4 Div занимает всю ширину родительского блока, а span подстраивается под ширину вложенного в него текста.
5. 5 Тег span размещается внутри тегов div, p, h1-h6, тег div, наоборот содержит в себе другие теги.

Надеюсь, что помогла вам разобраться с вопросом для чего нужен тег span в HTML. Если вы знаете другие его особенности, возможности и сферы применения – пишите об этом в комментариях.

А тем, кто дочитал статью до конца я предлагаю посмотреть вот это интересное видео. Оно не относится напрямую к HTML и CSS, но наверняка будет полезным.

Источник

Flex span автоматическая ширина, если строка переносится?

Если span в flex переносится на вторую строку, ширина становится 100%, как задать автоматическую ширину?

Результат:

А нужно что бы span был не на всю ширину, а по размеру текста и сам текст был по левой стороне, вот так:

Но при этом не задавая ширину span заранее

• Вопрос задан более трёх лет назад
• 1840 просмотров

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

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

Источник

CSS width of a tag

I use tags in my module titles, e.g.

I specify the span’s background color/image, width and height in css.

But the span’s width depends on its content/text.

So, if I do , with just a background image/color in css, nothing appears.

Of course, I want something to appear.

How can I resolve this?

8 Answers 8

spans default to inline style, which you can’t specify the width of.

would be a good way, except IE doesn’t support it

You could explicitly set the display property to «block» so it behaves like a block level element, but in that case you should probably just use a div instead.

You can’t specify the width of an element with display inline. You could put something in it like a non-breaking space ( ) and then set the padding to give it some more width but you can’t control it directly.

You could use display inline-block but that isn’t widely supported.

A real hack would be to put an image inside and then set the width of that. Something like a transparent 1 pixel GIF. Not the recommended approach however.

I would use the padding attribute. This will allow you add a set number of pixels to either side of the element without the element loosing its span qualities:

• It won’t become a block
• It will float as you expect

This method will only add to the padding however, so if you change the length of the content (from Categories to Tags, for example) the size of the content will change and the overall size of the element will change as well. But if you really want to set a rigid size, you should do as mentioned above and use a div.

See the box model for more details about the box model, content, padding, margin, etc.

Источник

CSS fixed width in a span

Within an unordered list:

Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.

The page is rendering with Courier New.

Goal is to have text after span lined up.

Justification of the «OR» is unimportant.

The lazy animal text may be wrapped in an additional element but I’ll have to double check.

11 Answers 11

In an ideal world you’d achieve this simply using the following css

This works on all browsers apart from FF2 and below.

Firefox 2 and lower don’t support this value. You can use -moz-inline-box, but be aware that it’s not the same as inline-block, and it may not work as you expect in some situations.

Quote taken from quirksmode

Like Eoin said, you need to put a non-breaking space into your «empty» spans, but you can’t assign a width to an inline element, only padding/margin so you’ll need to make it float so that you can give it a width.

Unfortunately inline elements (or elements having display:inline) ignore the width property. You should use floating divs instead:

Now I see you need to use spans and lists, so we need to rewrite this a little bit:

The tag will need to be set to display:block as it is an inline element and will ignore width.

You can do this method for assigning width for inline elements

Using HTML 5.0, it is possible to fix width of text block using or

For , what is important is to add following CCS line

For your empty what is important is to add space.

My code is following

PS: I have defined tab class because ul li span CSS selector is not working on my PC !

People span in this case cant be a block element because rest of the text in between li elements will go down. Also using float is very bad idea because you will need to set width for whole li element and this width will need to be the same as width of whole ul element or other container.

Try something like this in HTML:

So, when the li element is relative you format the span element to be as absolute and at the top:0;left:0; so it stays upper left and you set the padding-left (or: padding:0px 0px 0px 80px; ) to set this free space for span element.

Источник

Span width не работает

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник