Как только через CSS выделить начиная от второго слова другим цветом?
Как только через CSS выделить начиная от второго слова другим цветом? Также учесть что слово может быть одна буква, пример «О компании» Без изменения HTML Нужно первое слово сделать серым, все остальные слова красным:
Самый простой текст О компанииОтслеживать
Sergey Mironov
задан 17 сен 2020 в 3:02
Sergey Mironov Sergey Mironov
820 4 4 серебряных знака 17 17 бронзовых знаков
Никак. Либо JS, либо разметка
17 сен 2020 в 3:15
Хочу уточнить, вам надо чтобы «Самый» был одного цвета, а всё остальное другим?
17 сен 2020 в 3:54
@DGDays, да, только первое слово
17 сен 2020 в 3:58
@DaemonHK, а как через js сделать? к примеру если задам класс блоку «title»
17 сен 2020 в 4:02
@SergeyMironov stackoverflow.com/questions/55612/…
17 сен 2020 в 4:06
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Существует масса проблем и ограничений даже с ::first-letter , а уж ::first-word и вовсе пока не существует в природе. Поэтому «pure CSS» тут не поможет — только JS.
Скриптами можно покрыть все потребности и хотелки, причём практически без простыней кода:
let first = document.querySelector('.first'); first.innerHTML = first.innerHTML.replace(/(^ ?|
?|[. ] .*?)([\wа-яё]+)/gim, '$1$2'); let smart = document.querySelector('.smart'); smart.innerHTML = smart.innerHTML.replace(/(^ ?|
?|[. ] .*?)([\wа-яё])/gim, '$1$2');Первое слово в данном предложении зеленого цвета! А второе уже чёрного.
Снова зелёное? Да, опять зелёное. Включая предлоги и коротенькие слова.
Первое слово в данном предложении зеленого цвета! А второе тоже зелёного.
Снова зелёное? Да, опять зелёное. Предлоги и короткие слова не захватываем.
Как выделить слово в css
Есть ли такие теги html? с помощью которых можно выделить текст на странице сайта!?
Выделить строку, текст, слово, часть текста с помощью тега mark
Текст, часть текста, строку, слово можно выделить с помощью тега mark- получим эффект маркера
Выделить строку, текст, слово, часть текста с помощью тега b
Текст, часть текста, строку, слово можно выделить с помощью тега b — получим жирный текст
Выделить строку, текст, слово, часть текста с помощью тега strong
Текст, часть текста, строку, слово можно выделить с помощью тега strong- получим жирный текст
тег strong
Выделить строку, текст, слово, часть текста с помощью тега s
Текст, часть текста, строку, слово можно выделить с помощью тега s — получим перечеркнутый текст
Выделить строку, текст, слово, часть текста с помощью тега u
Текст, часть текста, строку, слово можно выделить с помощью тега u — получим выделенный подчеркнутый текст
Выделить строку, текст, слово, часть текста с помощью тега i
Текст, часть текста, строку, слово можно выделить с помощью тега i — текст будет выделяться своим наклоном.
Выделить строку, текст, слово, часть текста с помощью тега blockquote
Текст, часть текста, строку, слово можно выделить с помощью
blockquote
— Требуются отдельные стили, по умолчанию никак не выделяются. привел в качестве примера!
тег blockquote
background: none repeat scroll 0 0 #f4e892;
padding: 15px 38px;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.1) inset;
Картинку можете забрать здесь
Как выделить текст на странице html с помощью css
Выделить текст в html с помощью css можно. как вы только себе сомжете придумать! css — это такая мощная штука, у неё столько возможностей, что просто не передать словами!
Выделать текст покрасив его в другой цвет
Как выделить текст, покрасив его в красный!?
Далее часть текста , пусть это будет
Как выделить текст, покрасив его в синий!?
Может быть мы хотим выделить текст покрасив его в синий!? Легко!
Как выделить текст, покрасив его в зеленый!?
Можно выбрать любой цвет, не обязательно это будет именной цвет, в смысле слова, например это может быть цвет в буквенно цифровым.
текст выделен в green
Как выделить текст, покрасив его в черный!?
Для того, чтобы покрасить текст в черный, не обязательно выставлять цвет, он по умолчанию будет черным!
Но если например , где-то возникает такая необходимость, то цвет черный также предопределен и красится словом «black «
Как выделить текст, покрасив его в белый!?
Чтобы покрасить текст в белый нам потребуется покрасить задний фон , например в черный. иначе, текст белый, на белом фоне вы не увидите! Для белого цвет используется слово — «white»
Как выделить текст, покрасив его в фиолетовый!?
фиолетовый прил, пурпур, фиолетовый цвет, порфира
Как выделить текст, покрасив его в обожженный кирпич!?
Не знаю, какой — это цвет, firebrick -> «обожженный кирпич»? скорее всего между коричневым и красным
Как выделить текст, покрасив его в бордовый!?
Цвет текста бородовый -> «maroon»
Как выделить текст, покрасив его в оранжево-красный!?
Выделить текст цветом -> orangered -> оранжево-красный
текст выделен в orangered
Как выделить текст, покрасив его в полуночный голубой!?
Выделить текст цветом -> midnightblue-> полуночный голубой
текст выделен в midnightblue
Как выделить текст, покрасив его в полуночный голубой!?
Выделить текст цветом -> cornflowerblue-> цветок кукурузы голубой (не знаю как перевести. )
текст выделен в cornflowerblue
Думаю на этом такое перечисление достаточно, вы поняли как выделять текст цветом, поэтому. приведу еще цвета, которые переопределены словами:
Если этого не достаточно , то есть еще огромное количество цветов, для это нужен(например) генератор цвета
Как выделить строку, часть текста, слово цветом заднего фона
Цвет заднего фона может быть любым, как мы уже говорили -> выбрать любой цвет
Как выделить текст, покрасив задний фон в любой цвет!?
Можно выбрать любой цвет, возьмем из предыдущего пункта , строку и вместо выделенного текст а сделаем цветным задний фон, так строка, часть текста, текст слово, можно выделить любым цветом!
текст выделен в #05ff13
Как выделить слово часть строки, часть текста бордюром!?
Можно выделить часть текста слово бордюром
Можно выделить слово или часть текста бордюром.
часть текста
Как выделить слово часть строки, часть текста стилизованным тегом!?
Я конечно так не делаю, у меня есть стилизованные теги для разных целей:
Стили для этого блока:
margin: 10px 0 10px 0;
border: 1px solid #ff0000;
Выделать заголовок подчеркиванием
Является ли заголовок частью текста или словом, или просто текстом, который нам иногда нужно выделить!? У нас заголовок выделается проведенной под ни чертой! Кроме того, у меня есть отдельный тег
Это псевдо заголовок выделенный нижнем подчеркиванием
border-bottom: 1px solid #c5c5c5;
Интернет спрашивает о выделении текста/
как выделить курсивом некоторые слова в css
Я писал о курсиве.
Но вы спрашиваете «как выделить курсивом некоторые слова в css«.
Css не может угадать, какие слова вы хотите выделить в css. Поэтому существует всего несколько вариантов, выделить любой текст :
Обрамить этот текст тегом, любым тегом -> пример курсив
Либо обрамить этот текст любым другим тегом с классом(class) либо ид(id) и прописать им свойства в css.
Если требуется найти определенные слова в тексте и их выделить, то для этого css не подходит! Для этого нужен php, например str_replace
как выделить слово серым в html
Для выделения текста любым цветом, например серым, существует несколько вариантов:
Обрамляем текст в тег, например в в span
И сооружаем, например такую конструкцию :
span.example
Результат: текст любым цветом
как выделить текст в эркон
Честно сказать. я не знаю, что такое » эркон «. может быть все-таки » анкор «!? смайлы
Для выделения текста в анкор , у нас есть отдельная страница
как выделить текст синим html
Для выделения текста синим, или любым другим цветом, поступаем аналогично, что проделывали с серым:
Выделенный текст синим цветом
Результат: Выделенный текст синим цветом
как выделить текст спаном в css
Немного непонятный вопрос. что вы хотите. учитесь правильно задавать вопросы, как в том фильме :
— А это правильный вопрос!
Спаном можно выделить текст, если это тег span
Ему присвоить либо, класс(class), либо ид(id) и уже потом прописать в css
Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа. Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.
Выделить всё
Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).
Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!
Выделить всё… Затем выделить часть
Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.
Во-первых, надо использовать tabindex , чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки. Это позволит CSS узнать о клике по HTML-элементу.
Это фрагмент кодаТеперь немного CSS.
code < -webkit-user-select: all; user-select: all; >code:focus < animation: select 100ms step-end forwards; >@keyframes select < to < -webkit-user-select: text; user-select: text; >>Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство user-select: all , а затем, когда фокус переместится на этот элемент, переключиться на «обычный» user-select: text , чтобы текст можно было выбирать по частям. Выбор времени переключения – дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от user-select: all не будет никакого эффекта, т.к. оно успеет сменить значение на text . Поможет решить проблему animation .
CSS-свойство user-select можно анимировать. Оно дискретно анимированное, это означает, что нет постепенной интерполированной анимации, по истечении указанного времени происходит немедленный переход от одного состояния к другому. Поэтому, можно использовать animation , чтобы отложить изменение поведения выделения текста до 100 миллисекунд после передачи фокуса HTML-элементу.
Предотвращение выделения текста
CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.
label
Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения – выглядеть немного странно и дико.
Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа – нет.
Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details ) или фальшивыми кнопками – например, с обработчиком кликов на нём. Правда, использование настоящего элемента предпочтительнее не только с точки зрения семантики и доступности, но и потому, что текст в такой кнопке по умолчанию не может быть выделен, а это позволяет избежать проблемы с самого начала.
Выборочное выделение текста
Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.
В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.
Но это работает не во всех браузерах. Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.
Стилизация выделения
Стилизовать выделенный текст можно с помощью псевдоэлемента ::selection . Однако настройки ограничены тремя CSS-свойствами: color , background-color и text-shadow (в спецификации их больше, но всё портит поддержка свойств браузерами).
Вот пример стилизации выделенного текста в HTML-элементе
.
p::selection
Чтобы увидеть результат, выделяйте текст в примере ниже.
Немного особенностей
Есть еще одна декларация user-select: contain , которая должна ограничивать выделение текста внутри элемента, как это работает с . Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение contain не поддерживают все современные браузеры.
Тем не менее, все редактируемые элементы (такие как ) обрабатываются, как если бы они имели user-select: contain . Псевдоэлементы ::before и ::after нельзя выбрать, как если бы у них было установлено user-select: none . Изменить такое поведение не получится.
Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.
Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.
Выделить цветом первую букву каждого слова в предложении
Это можно сделать только посредством css не оборачивая слова в html? Поиск по google дал ::first-letter и text-transform , но это не то.
Отслеживать
задан 16 окт 2018 в 21:33
37 4 4 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Сделать это средствами css невозможно. Более того, выделение предложения — непростая семантическая задача. Точки не годятся (г. Москва, 1990 г.р., гр. Иванов и т.д. и т.п.)
Разумные результаты по выделению предложений мне удалось получить лишь с помощью Томита-парсера от Яндекс. Но он работает на php.
Отслеживать
ответ дан 16 окт 2018 в 21:55
KAGG Design KAGG Design
35.1k 4 4 золотых знака 24 24 серебряных знака 53 53 бронзовых знака
В исходном вопросе я немного не это имел в виду. Предложение фиксированно (некоторый текст, обернутый в div ), и в этом конкретном div е надо первую букву каждого слова выделить цветом. И чтобы новый мелкий вопрос не открывать, не могли бы ответить на следующий: «Как сделать отступ между абзацами с помощью псевдоэлементов?»
16 окт 2018 в 22:02
Ну, если предложение искать не надо, то задача намного легче, но опять же, решается только через js.
17 окт 2018 в 4:56
А зачем именно с помощью псевдоэлементоа? Чем обычный padding-bottom/margin-bottom не угодил? Но если сильно хочется, добавьте тот же margin блоку after