Как сделать текст в строку css
Перейти к содержимому

Как сделать текст в строку css

  • автор:

Css — чтобы текст помещался в одну строку?

Здравствуйте! Бывает заголовки длиннее обычного и они переносятся на вторую строку. Я понимаю, что можно запретить перенос слов, но в таком случае текст будет выходить за пределы div. Есть ли возможность с помощью css настроить постоянный размер шрифта к примеру 18px, а если текст не помещается в одну строку — то чтобы уменьшался, но только в тех пределах, чтобы текст поместился в одну строку (не меньше).ю Спасибо.

ВМЕСТО или ВМЕСТЕ с ADSENE — ADSTERRA — https://publishers.adsterra.com/referral/wf8uqXSYuu Раcскажу, подскажу.

На сайте с 20.02.2015
24 апреля 2015, 13:22

overflow: hidden;
На сайте с 15.06.2006
24 апреля 2015, 13:25
можно нагуглить готовый скрипт или написать самому, высчитывая для заголовка transform: scale
На сайте с 12.05.2007
24 апреля 2015, 13:37

вряд ли такое возможно на чистом css, можно обрезать текст через свойство overflow, несколько примеров в том числе с заменой не влезающей части на многоточие или градиент. с помощью PHP в скрипте, или с помощью JS тоже самое, подсчет символов и уменьшение размера, например при количестве 20 символов размер 18пх, 30 символов — 14пх, 40 символов — 10пх.

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget

На сайте с 30.11.2010
24 апреля 2015, 13:37

Есть ли возможность с помощью css настроить постоянный размер шрифта к примеру 18px,
а если текст не помещается в одну строку — то чтобы уменьшался, но только в тех пределах, чтобы текст поместился в одну строку (не меньше).ю
Спасибо.

CSS многоточие после нескольких строк

В CSS очень просто обрезать текст в одной строке для некоторой ширины и отобразить многоточие.

text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 300px;

Но все не так просто, если надо обрезать текст после трёх (нескольких) строк. Это можно сделать с помощью javascript, но это будет не самое элегантное решение. Есть другой простой способ – использовать CSS-свойство line-clamp .

CSS-свойство line-clamp помогает подрезать текст на определенное количество строк.

Синтаксис

.module < line-clamp: [none | ]; >

line-clamp может принимать следующие значения:

  • none : не устанавливает ограничение, подрезания строк не будет.
  • : устанавливает максимальное количество строк перед подрезанием содержимого, а затем отображает многоточие (…) в конце последней строки.

А как это сделать с text-overflow ?

Для text-overflow действительно есть значение ellipsis для ограничения текста:

.truncate < text-overflow: ellipsis; /* Нужно, чтобы это заработало */ overflow: hidden; white-space: nowrap; >

Для начала – нормально. Но что, если надо добавить многоточие не в первой строке, а где-нибудь, скажем, в третьей строке текста?

Вот здесь в игру вступает line-clamp . Надо заметить, что для придётся использовать комбинацию из трех свойств:

.line-clamp

Но, есть нюанс…

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

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

Если добавить немного Javascript, например, использовать небольшой скрипт Clamp.js, получится расширить этот список, посмотрите:

2.5. CSS-текст

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

Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

CSS построен на Unicode.

  • Содержание:
  • 1. Преобразование текста: свойство text-transform
  • 2. Обработка пробелов и переносы строк: свойство white-space
  • 3. Настройка табуляции: свойство tab-size
  • 4. Разрыв строки и границы слов
  • 4.1. Правила разрыва для букв: свойство word-break
  • 4.2. Разрыв строки: свойство line-break
  • 4.3. Расстановка переносов: свойство hyphens
  • 4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap
  • 5. Выравнивание и выключка строк
  • 5.1. Выравнивание текста: свойство text-align
  • 5.2. Выравнивание текста по умолчанию: свойство text-align-all
  • 5.3. Выравнивание последней строки: свойство text-align-last
  • 6. Промежутки
  • 6.1. Промежутки между словами: свойство word-spacing
  • 6.2. Трекинг: свойство letter-spacing
  • 7. Отступ первой строки: свойство text-indent

1. Преобразование текста: свойство text-transform

Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

text-transform
Значения:
none Значение по умолчанию, означает отсутствие эффектов.
capitalize Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
uppercase Выводит все слова в элементе прописными буквами.
lowercase Выводит все слова в элементе строчными буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit; text-transform: initial;

2. Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

white-space
Значения:
normal Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap Запрещает переносы строк, за исключением применения
.
pre Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line Удаляет лишние пробелы, за исключением случаев
.
break-spaces Поведение идентично pre-wrap , за исключением того, что: любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки; возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; white-space: inherit; white-space: initial;

3. Настройка табуляции: свойство tab-size

Свойство tab-size используется для изменения величины отступа, получаемого с помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

Работает только для элементов и , для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

tab-size
Значения:
целое число Любое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам.
длина Значение отступа, указываемое в единицах длины, например, рх .
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
tab-size: 0; tab-size: 10px; tab-size: inherit; tab-size: initial;

4. Разрыв строки и границы слов

Когда содержимое на строчном уровне разбивается на строки, оно разбивается на линейные блоки. Такое разбиение называется разрыв строки.

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

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

4.1. Правила разрыва для букв: свойство word-break

Свойство word-break определяет возможности мягкого переноса между буквами, т.е. когда допустимо разбивать строки текста. В частности, оно контролирует, существует ли возможность мягкого переноса между смежными типографскими буквенными единицами и/или цифрами. Это не влияет на правила, регулирующие возможности мягкого переноса, созданные пробелами.

word-break
Значения:
normal Слова разрываются в соответствии с их обычными правилами. Значение по умолчанию.
break-all Разрыв допускается в пределах слов. Перенос слов не применяется.
keep-all Запрещает разрывы между парами символов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
word-break: normal; word-break: break-all; word-break: keep-all; word-break: inherit; word-break: initial;
4.2. Разрыв строки: line-break

Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

line-break
Значения:
auto Браузер определяет набор используемых ограничений на разрыв строки, которые могут варьироваться в зависимости от длины линии, например, использовать менее строгий набор правил разрыва строки для коротких строк. Значение по умолчанию.
loose Разбивает текст, используя наименее ограничивающий набор правил переноса строк. Обычно используется для коротких строк, например, в газетах.
normal Разбивает текст, используя наиболее распространенный набор правил переноса строк.
strict Разбивает текст, используя строгий набор правил переноса строк.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: inherit; line-break: initial;
4.3. Расстановка переносов: свойство hyphens

Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐ ). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.

CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

hyphens
Значения:
none Слова не переносятся, даже если символы внутри слова явно определяют возможности переноса.
manual Слова переносятся только в тех местах, где внутри слова есть символы, которые явно указывают на возможность переноса слов (специальный символ ­ ). Значение по умолчанию.
auto Слова могут быть разбиты на возможности переноса, определяемые автоматически соответствующим языку ресурсом переноса в дополнение к тем, которые явно указаны условным дефисом. Необходимо задать язык своего контента (например, используя HTML-атрибут lang или заголовок HTTP Content-Language), чтобы получить правильный автоматический перенос слов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
hyphens: none; hyphens: manual; hyphens: auto; hyphens: inherit; hyphens: initial;
4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

Свойство overflow-wrap (или его устаревшее имя word-wrap ) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.

overflow-wrap, word-wrap
Значения:
normal Неразрывные строки могут разрываться только в разрешенных точках разрыва. Значение по умолчанию.
break-word
anywhere Неразрывная последовательность символов может быть разбита в произвольной точке, если в строке нет других приемлемых точек разрыва. Влияет только на визуальное отображение, не затрагивая исходный текст. В точке разрыва строки символ переноса не добавляется. Возможности мягкого переноса, представленные в любом месте, учитываются при расчете собственных размеров минимального содержимого.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; overflow-wrap: inherit; overflow-wrap: initial;

5. Выравнивание и выключка строк

Выравнивание и выключка строк контролируют, как встроенный контент распределяется в линейном блоке.

5.1. Краткая запись для выравнивания текста: свойство text-align

Блок текста представляет собой набор линейных блоков. Свойство text-align задает свойства text-align-all и text-align-last и описывает, как блоки на уровне строки в каждом линейном блоке выравниваются относительно начальной и конечной сторон линейного блока. Значения, отличные от justify-all или match-parent , присваиваются text-align-all и сбрасываются в text-align-last на auto .

text-align
Значения:
start Содержимое на уровне строки выравнивается по начальному краю линейного блока. Значение по умолчанию.
end Содержимое на уровне строки выравнивается по конечному краю линейного блока.
left Содержимое на уровне строки выравнивается по левому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
right Содержимое на уровне строки выравнивается по правому краю строки линейного блока. В вертикальных системах письменности это будет физический верх или низ, в зависимости от ориентации текста.
center Содержимое на уровне строки центрируется внутри линейного блока.
justify Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле строки, прижимаюсь к левому и правому краям родительского элемента. Если иное не указано в text-align-last , последняя строка перед принудительным разрывом или конец блока выравнивается по началу. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
justify-all Устанавливает text-align-all и text-align-last в justify , также выравнивая последнюю строку.
match-parent Значение ведет себя так же, как inherit за исключением того, что унаследованное значение start или end интерпретируется относительно значения direction (или исходного содержащего блока, если нет родителя) и приводит к вычисленному значению left или right .
inherit Наследует значение свойства от родительского элемента.
text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; text-align: inherit;
5.2. Выравнивание текста по умолчанию: свойство text-align-all

Свойство text-align-all — сокращенный вариант свойства text-align определяет выравнивание всех строк содержимого в контейнере блока, за исключением последних строк, переопределенных значением text-align-last . Принимает значения start , end , left , right , center , justify и match-parent .

text-align-all: start; text-align-all: end; text-align-all: left; text-align-all: right; text-align-all: center; text-align-all: justify; text-align-all: match-parent; text-align-all: inherit;
5.3. Выравнивание последней строки: свойство text-align-last

Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

Если задано значение auto , содержимое в соответствующей строке выравнивается по text-align-all , если только для text-align-all не настроено justify — в этом случае оно выравнивается по началу блока. Все остальные значения интерпретируются как описано для text-align .

Принимает значения auto , start , end , left , right , center , justify и match-parent .

text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; text-align-last: match-parent;

6. Промежутки

CSS позволяет контролировать промежутки между словами и типографскими символами с помощью свойств word-spacing и letter-spacing .

6.1. Промежутки между словами: свойство word-spacing

Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

word-spacing
Значения:
normal Дополнительный интервал не применяется. Вычисляет в 0 . Значение по умолчанию.
длина Задает дополнительный интервал в дополнение к внутреннему интервалу между словами, определенному шрифтом. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
word-spacing: normal; word-spacing: 1px; word-spacing: 0.2em; word-spacing: 1rem; word-spacing: inherit; word-spacing: initial;
6.2. Трекинг: свойство letter-spacing

Свойство letter-spacing определяет дополнительный интервал, или трекинг, между смежными типографскими символами. Межбуквенный интервал является дополнением к кернингу и word-spacing . В зависимости от действующих правил выравнивания пользовательские агенты могут дополнительно увеличивать или уменьшать расстояние между типографскими символьными единицами для выравнивания текста.

letter-spacing
Значения:
normal Дополнительный интервал не применяется. Вычисляет в 0 . Значение по умолчанию.
длина Определяет дополнительный интервал между типографскими символами. Значения могут быть отрицательными, но могут быть ограничения, зависящие от реализации.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
letter-spacing: normal; letter-spacing: 0.1em; letter-spacing: 2px; letter-spacing: inherit; letter-spacing: initial;

7. Отступ первой строки: свойство text-indent

Свойство text-indent задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному краю линейного блока.
Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом.

text-indent
Значение:
длина/ % Размер отступа в виде абсолютной длины. Процентное значение вычисляется от собственной логической ширины блока-контейнера. Значение по умолчанию 0 .
each-line Отступы затрагивают первую строку каждого блока-контейнера и каждую строку после принудительного разрыва строки (но не строки после с мягким переносом).
hanging Обратное преобразование. Все строки, кроме первой, будут с отступом.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
text-indent: 5mm; text-indent: 20px; text-indent: 5%; text-indent: 2em each-line; text-indent: 2em hanging; text-indent: inherit; text-indent: initial;

Как вставить текст столбиком?

56929db28ade4b5aa757000e3931fb96.png

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

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

2 комментария

Средний 2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *