Выравнивание текста в элементе <span> CSS без изменения тегов

Быстрый ответ

Сразу перейдем к практическому примеру. Для задания фиксированной ширины элементу <span> воспользуемся стилями CSS и классом .fixed-width:

<span class="fixed-width">На примере текста</span>

.fixed-width {
    display: inline-block;  /* Внимание на свойство, позволяющее span учесть ширину */
    width: 100px;           /* Устанавливаем требуемое значение */
    overflow: hidden;       /* Скрываем текст, выходящий за границы */
    white-space: nowrap;    /* Запрещаем перенос слов на новую строку */
}

Теперь ваш <span> строго придерживается заданной ширины благодаря display: inline-block, а текст отображается в пределах одной строки, что гарантирует white-space: nowrap.

Как миримся с особенностями браузеров

Разработка веб-проектов часто подразумевает борьбу с особенностями старых версий браузеров. Использование display: inline-block для инлайновых элементов вроде <span>, может привести к непредвиденным результатам в старых версиях Firefox. Альтернативой был -moz-inline-box. Но в современной действительности такие "реликвии" уже редкость, и display: inline-block функционирует безо всякого сучка.

Управление текстилем: Выравнивание и объем

Если важно, чтобы текст шел строго по линии, пора воспользоваться свойством float: left. Оно заставит следующий контент располагаться близко к <span> и при этом учесть заданную ширину. Чтобы избежать обтекания текста, после <span> обычно ставят неразрывный пробел ( ).

Подгонка по формату: отступы, поля

Если вы не можете вносить изменения в свойство display, заменителем могут стать отступы padding и внешние поля margin; они не зададут фиксированную ширину, но помогут создать впечатление контролируемого пространства.

.somewhat-controlled-text {
    padding: 0 10px;   /* Горизонтальные отступы создадут пространство */
    margin: 0 5px;     /* Горизонтальные поля отделяют элементы друг от друга */
}

Время для дополнительных оберток!

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

<span class="fixed-width">
    <span class="inner-text">Текст внутри</span>
</span>

Теперь можно манипулировать внутренним <span>, не забывая при этом о фиксированной ширине внешнего элемента.

Визуализация

Подход следующий – вы устанавливаете как бы предел для движения автомобиля:

Было: 🚗 – Машина двигалась без ограничений.
Стало: 🚗⛓ – Машина связана цепью и ограничена в передвижении.

<span style="display: inline-block; width: 100px;">Текст с фиксированной шириной</span>

С <span> происходит все по тому же принципу: его движение ограничено фиксированной шириной, и он не выйдет за границы 100px, независимо от содержимого.

Овладение inline-block

Есть ситуации, когда display: inline-block кажется как бы неподдерживающим заданные размеры width. Это может быть связано с ограничениями родительских элементов или взаимодействием с соседями. Возможные решения:

• Проверьте, не забивают ли другие CSS-правила ваше значение ширины.
• В адаптивных макетах подумайте о использовании процентов (width: 50%;) или единиц вьюпорта (width: 100vw;).
• Не забывайте о блочной модели, чтобы учитывать общий размер элемента, включая padding, border и margin.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — Все тонкости управления макетами на профессиональном уровне.
2. <span>: Элемент для размещения контента – MDN — Детальное изучение скромного элемента <span>.
3. Разница между width:100% и width:100vw – Stack Overflow — Обсуждение настройки ширины в CSS.
4. Используйте rem для глобального масштабирования; em для локального масштабирования | CSS-Tricks — Гид по применению единиц измерения em и rem.
5. CSS Макет – inline-block | W3Schools — Подробное руководство, которое сделает использование inline-block легким, как владение мечом джедая.