Текст по правому краю html: Как выровнять по правому краю html

html — Выровнять текст по обоим краям

Задать вопрос

Вопрос задан 6 лет 7 месяцев назад

Изменён 6 лет 7 месяцев назад

Просмотрен 882 раза

Всем привет!

Как выровнять текст сразу и по левому, и по правому краю? Например, у меня есть текст:

Sample example - 111 abc
SomeExample Sample - 2222 abc

А нужно что бы было вот так:

Sample example -        111abc
SomeExample Sample -   2222abc

• html
• css
• вёрстка

1

Поместите выравниваемый по правому краю текст в span с float:right;.

Всю строку, в свою очередь, оберните в div.

Например:

<div> 
    <p>Sample example - <span>111abc</span></p>
</div>

2

Выровнять текст (без дополнительной разметки в нем) по обоим краям можно за счет text-align: justify;:

.text-justify {
  text-align-last: justify;
  text-align: justify;
}

.text-justify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.example {
  width: 300px;
}

<div>
  Sample example - 111 abc
  <br/>
  SomeExample Sample - 2222 abc
</div>

<div>
  <p>Sample example - 111 abc</p>
  <p>SomeExample Sample - 2222 abc</p>
</div>

Или посмотреть код на jsfiddle

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Выравнивание или выключка текста в Adobe InDesign

Руководство пользователя Отмена

Поиск

1. Руководство пользователя InDesign
   
2. Основы работы с InDesign
   
   1. Введение в InDesign
      
      1. Новые возможности InDesign
         
      2. Системные требования
         
      3. Общие вопросы
         
      4. Использование библиотек Creative Cloud
         
   2. Рабочая среда
      1. Основные сведения о рабочей среде
         
      2. Панель инструментов
         
      3. Установка параметров
         
      4. Рабочая среда «Сенсорное управление»
         
      5. Комбинации клавиш по умолчанию
      6. Восстановление документа и отмена
3. Создание документов и макетов
   
   1. Документы и страницы
      1. Создание документов
      2. Работа со страницами-шаблонами
      3. Работа с несколькими документами
      4. Задайте размер страницы, поля или области выпуска
      5. Работа с файлами и шаблонами
      6. Создание файлов книг
      7. Добавление основной нумерации страниц
      8. Нумерация страниц, глав и разделов
      9. Преобразование документов QuarkXPress и PageMaker
      10. Совместное использование содержимого
      11. Основные рабочие процессы с управляемыми файлами
      12. Сохранение документов
   2. Сетки
      1. Сетки
      2. Форматирование сеток
   3. Средства создания макетов
      1. Линейки
4. Добавить содержимое
   
   1. Текст
      1. Добавление текста к фреймам
      2. Связывание текстовых блоков
      3. Возможности для арабского языка и иврита в InDesign
      4. Создание текста по контуру
      5. Маркеры и нумерация
      6. Глифы и специальные символы
      7. Компоновка текста
      8. Текстовые переменные
      9. Создание QR-кодов
      10. Редактирование текста
      11. Выравнивание текста
      12. Обтекание текста вокруг объектов
      13. Привязанные объекты
      14. Связанное содержимое
      15. Форматирование абзацев
      16. Форматирование символов
      17. Найти/заменить
      18. Проверка орфографии и языковые словари
   2. Типографика
      1. Использование шрифтов в InDesign
      2. Кернинг и трекинг
   3. Форматирование текста
      1. Форматирование текста
      2. Работа с пакетами стилей
      3. Табуляторы и отступы
   4. Рецензирование текста
      1. Отслеживание и просмотр изменений
      2. Добавление редакционных примечаний в InDesign
      3. Импорт комментариев файла PDF
   5. Добавление ссылок
      1. Создание оглавления
      2. Сноски
      3. Создание указателя
      4. Концевые сноски
      5. Подписи
   6. Стили
      1. Стили абзацев и символов
      2. Сопоставление, экспорт и организация стилей
      3. Стили объектов
      4. Буквицы и вложенные стили
      5. Работа со стилями
      6. Интерлиньяж
   7. Таблицы
      1. Форматирование таблиц
      2. Создание таблиц
      3. Стили таблиц и ячеек
      4. Выделение и редактирование таблиц
      5. Обводка и заливка таблиц
   8. Интерактивные функции
      1. Гиперссылки
      2. Динамические документы PDF
      3. Закладки
      4. Кнопки
      5. Формы
      6. Анимация
      7. Перекрестные ссылки
      8. Структурирование документов PDF
      9. Переходы страниц
      10. Аудио и видео
   9. Графические объекты
      1. Знакомство с контурами и фигурами
      2. Рисование с помощью инструмента «Карандаш»
      3. Рисование с помощью инструмента «Перо»
      4. Применение параметров линии (штриха) 
      5. Составные контуры и фигуры
      6. Редактирование контуров
      7. Обтравочные контуры
      8. Изменение параметров угла
      9. Выравнивание и распределение объектов
      10. Связанные и встроенные графические объекты
      11. Интеграция ресурсов AEM
   10. Цвет и прозрачность
       1. Применение цвета
       2. Использование цветов из импортированной графики
       3. Работа с цветовыми образцами
       4. Смешение красок
       5. Оттенки
       6. Знакомство с плашечными и триадными цветами
       7. Наложение цветов
       8. Градиенты
       9. Сведение прозрачного графического объекта
       10. Добавление эффектов прозрачности
5. Общий доступ
   1. Работа с облачными документами InDesign
   2. Облачные документы в InDesign | Часто задаваемые вопросы
   3. Общий доступ и совместная работа        
   4. Отправка на редактирование
   5. Проверка опубликованного документа InDesign
   6. Управление отзывами 
6. Публикация
   
   1. Размещение, экспорт и публикация
      1. Публикация в Интернете
      2. Копирование и вставка графических объектов
      3. Экспорт содержимого в формат EPUB
      4. Параметры Adobe PDF
      5. Экспорт содержимого в формат HTML
      6. Экспорт в формат Adobe PDF
      7. Экспорт в формат JPEG
      8. Экспорт в HTML
      9. Обзор DPS и AEM Mobile
      10. Поддерживаемые форматы файлов
   2. Печать
      1. Печать брошюр
      2. Метки и выпуск за обрез
      3. Печать документов
      4. Краски, цветоделенные формы и линиатура растра
      5. Наложение
      6. Создание PostScript и EPS-файлов
      7. Предпечатная проверка файлов перед отправкой
      8. Печать миниатюр или документов большого формата
      9. Подготовка файлов PDF для поставщиков услуг
      10. Подготовка к печати цветоделенных форм
7. Расширение InDesign
   
   1. Автоматизация
      1. Объединение данных
      2. Плагины
      3. Расширение Capture в InDesign
      4. Разработка сценариев
8. Устранение неполадок
   1. Исправленные ошибки
   2. Аварийное завершение работы при запуске
      
   3. Ошибка папки настроек: только для чтения
   4. Поиск и устранение проблем с файлами
   5. Невозможно экспортировать в PDF
   6. Восстановление документов InDesign

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

Текст может быть выровнен по одному или по обоим краям (отступам) текстового фрейма. Текст считается выключенным, если он выровнен с обеих сторон. Можно выбрать выравнивание всего текста в абзаце, кроме последней строки («Выключка по левому краю» или «Выключка по правому краю»), либо включая ее («Выключка по формату»). Если последняя строка содержит всего несколько символов, то, возможно, нужно будет применить специальный символ конца материала и создать концевую шпацию.

Результат применения режимов «Выключка по левому краю» (слева) и «Выключка по формату» (справа)

Примечание.

При выключке текста при помощи компоновщика абзацев Adobe, чтобы обеспечить одинаковую плотность текста в абзаце и его визуальную привлекательность, InDesign производит смещение текста. Можно произвести точную подстройку интервалов в выключенном тексте.

При размещении текста по центру или выключке текста в сетке фрейма текст больше не будет выравниваться точно по сетке. Можно также задать выравнивание для всех абзацев в сетке фрейма.

1. Выделите текст

2. В палитре «Абзац» или в панели «Управление» нажмите одну из кнопок в области «Выравнивание»: «Влево», «По центру», «Вправо», «Выключка влево», «Выключка по центру», «Выключка вправо» или «Выключка по формату».

3. (Необязательно) Щелкните «Выключка к корешку» или «Выключка от корешка».

   Применение к абзацу параметра «Выключка к корешку» приводит к тому, что текст левой страницы разворота выравнивается по правому, а правой – по левому краю. Аналогичным образом, применение к абзацу параметра «Выключка от корешка» приводит к тому, что текст левой страницы разворота выравнивается по левому краю, а правой страницы – по правому.

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

Примечание.

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

Выравнивание абзацев по сетке из базовых линий

Сетка из базовых линий представляет интерлиньяж основного текста документа. Это значение может быть кратно изменено для всех элементов страницы, чтобы гарантировать, что текст всегда будет выровнен по столбцам и страницам. Например, если основной текст в документе имеет интерлиньяж 12 пунктов, то для текста заголовка можно задать интерлиньяж в 18 пунктов и добавить отступ 6 пунктов перед абзацами, которые находятся перед заголовком.

Использование сетки из базовых линий гарантирует единообразие размещения текстовых элементов на странице. Она позволяет настроить интерлиньяж абзаца таким образом, чтобы его базовая линия была гарантированно выровнена по основной сетке страницы. Этот метод можно использовать в том случае, если базовые линии текста находятся в нескольких столбцах, а также при выравнивании смежных текстовых фреймов. Параметры сетки из базовых линий изменяются в разделе «Сетка и направляющие» диалогового окна «Установки».

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

Для просмотра сетки из базовых линий выберите меню «Вид» > «Сетка и направляющие» > «Показать базовую сетку».

Примечание.

Сетка из базовых линий отображается на экране только в том случае, если масштаб документа больше минимального масштаба отображения линий, заданного в разделе установок «Сетка и направляющие». Для их отображения может потребоваться увеличение масштаба отображения.

Выравнивание абзацев по сетке из базовых линий

1. Выделите текст

2. В палитре «Абзац» или на панели «Управление» щелкните «Выровнять по сетке из базовых линий»  .

Примечание.

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

Выравнивание только по сетке из базовых линий первой строки

1. Выделите абзац, который нужно выровнять.

2. В меню палитры «Абзац» или панели «Управление» выберите «Выровнять по сетке только первую строку».

3. В палитре «Абзац» или на панели «Управление» щелкните «Выровнять по сетке из базовых линий»  .

Создание сбалансированного текста заголовка

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

Вид до и после применения к заголовку параметра «Сбалансировать невыключенные строки»

1. Щелкните абзац, который нужно сбалансировать.

2. В меню палитры «Абзац» или панели «Управление» выберите «Сбалансировать невыключенные строки».

Эта функция будет работать только в том случае, если выбран компоновщик абзацев Adobe.

Создание абзацев, объединяющих или разделяющих колонки

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

Можно также разделить абзац на несколько колонок в пределах одного текстового фрейма.

 

Абзац, охватывающий несколько колонок, и разделение абзаца на колонки

A. Заголовок, охватывающий несколько колонок B. Разделение абзаца на колонки 

Растягивание абзаца на колонки

1. Поместите точку вставки в абзац.

   Эту функцию можно также включить в стиль абзаца, например в стиль заголовка.

2. Выберите «Объединить колонки» в меню панели «Управление» или палитры «Абзац».

3. Выберите «Растянуть на колонки» из меню «Компоновка абзаца».

4. Выберите количество колонок, на которое вы хотите растянуть абзац в меню «Растянуть». Выберите «Все», если вы хотите растянуть абзац на все колонки.

5. Чтобы добавить место до или после растянутого абзаца, укажите значения для «Пробела перед растягиванием колонок» и «Пробела после растягивания колонок», а затем щелкните OK.

Разделение абзаца на колонки

1. Поместите точку вставки в абзац.

   Эту функцию можно также включить в стиль абзаца, например в стиль заголовка.

2. Выберите «Объединить колонки» в меню панели «Управление» или палитры «Абзац».

3. Выберите «Разделить на колонки» из меню «Компоновка абзаца».

4. Укажите описанные ниже параметры и нажмите кнопку «ОК».

   Подколонки

   Выберите количество колонок, на которое вы хотите разделить абзац.

   Пробел перед разделением на колонки/Пробел после разделения на колонки

   Добавьте при необходимости место до или после разделенного абзаца.

   Внутренний средник

   Определите размер пространства между разделенными абзацами.

   Внешний средник

   Определите размер пространства и поля между внешним и разделенным абзацами.

Выравнивание или разгонка текста по вертикали в текстовом фрейме

Можно выровнять или распределить строки текста внутри фрейма вдоль его вертикальной оси, чтобы добиться вертикальной однородности текста внутри фреймов и столбцов.

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

Выключка по вертикали — по нижнему краю (слева) и по формату (справа)

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

• Верхний край фрейма определяется в качестве базовой линии первой строки текста, выравниваемого по верхнему краю. Это значение определяется параметром «Отклонение базовой линии первой строки» в диалоговом окне «Параметры текстового фрейма».

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

• При применении параметра «Выровнять по базовым линиям» к абзацам с выравниванием по верхнему краю, по центру или по нижнему краю все строки будут выровнены по сетке из базовых линий. При использовании параметра «С выключкой» по сетке из базовых линий будут выровнены только первая и последняя строки.

• Если в диалоговом окне «Параметры текстового фрейма» заданы значения «Отступ сверху» или «Отступ снизу» для текстового фрейма, то можно изменить расположение соответственно первой и последней базовой линии.

1. Выполните одно из следующих действий:

2. Выберите меню «Объект» > «Параметры текстового фрейма».

3. В разделе «Вертикальная выключка» диалогового окна «Параметры текстового фрейма» выберите один из следующих параметров в меню «Вариант выключки»:

   • Выберите «Сверху», чтобы выровнять текст вниз от верхнего края фрейма по вертикали (эта настройка используется по умолчанию).

   • Выберите «По центру», чтобы центрировать строки текста внутри фрейма.

   • Выберите «Снизу», чтобы выровнять строки текста вверх от нижнего края фрейма по вертикали.

   • Выберите «Разгонка», чтобы распределить строки текста равномерно по вертикали между верхним и нижним краями фрейма.

4. Если выбран параметр «Разгонка» и необходимо предотвратить ситуацию, когда интерлиньяж становится непропорционально большим по сравнению со значением интервала между абзацами, задайте значение «Максимальный интервал между абзацами». Интервал между абзацами увеличивается до этого заданного значения. Если текст по-прежнему не заполняет фрейм, то интервал между строками нужно увеличивать до тех пор, пока он не будет заполнен. В дополнение к значениям «Отбивка перед абзацем» или «Отбивка после абзаца», вводимым в палитре «Абзац», применяется также значение максимального интервала между абзацами.

   Максимальный интервал между абзацами в 0 пика (слева) и 1 пика (справа)

   Примечание.

   Будьте внимательны к вертикальной выключке текстовых фреймов с несколькими колонками. Если последняя колонка содержит несколько строк, то интервал между строками может оказаться слишком большим.

5. Нажмите кнопку «ОК».

Примечание.

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

Справки по другим продуктам

• Изменение параметров выключки
• Изменение отображения сетки
• Свойства сетки фреймов
• Выравнивание текста различных размеров
• Сетки
• Настройка сетки из базовых линий для текстового фрейма

Вход в учетную запись

Войти

Управление учетной записью

Вход в учетную запись

Войти

Управление учетной записью

html — Многоточие для текста, выровненного по правому краю

Задавать вопрос

спросил 2 года, 6 месяцев назад

Изменено 2 года, 6 месяцев назад

Просмотрено 618 раз

Я хочу иметь многоточие для текста, выровненного по правому краю. Многоточие возникает, когда текст выровнен по левому краю или если разрыв происходит в середине слова.

 html,
тело {
  заполнение: 0;
  маржа: 0;
  высота: 100%;
  ширина: 100%;
}
тело {
  дисплей: гибкий;
  flex-направление: столбец;
  выравнивание элементов: по центру;
  разрыв: 2эм;
}
дел {
  ширина: 200 пикселей;
  набивка: 1em;
  цвет фона: розовый;
}
п {
  дисплей: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: вертикальный;
  переполнение: скрыто;
}
стр. справа {
  выравнивание текста: вправо;
} 

 <дел>
  
Быстрая коричневая лиса перепрыгивает через ленивую собаку. Быстрая коричневая лиса перепрыгивает через ленивую собаку