ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Строка исправленного текста над строкой ошибочного текста, css?
7 сообщений из 7, страница 1 из 1
Строка исправленного текста над строкой ошибочного текста, css?
    #39815427
Cane Cat Fisher
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cane Cat Fisher
Участник
Как сделать попроще в html/css такую штуку?

То есть блок (или это будет не блок?) "исправление" должен начинаться по строке там же, где "ошибка", располагаться над "ошибкой", таскаться за ней при переформатировании текста.

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

Если для "исправления" задать vertical-align = super, то он успешно прыгнет вверх, но "ошибка" не будет под ним, а только после него, правее. А надо под ним.
...
Рейтинг: 0 / 0
20.05.2019, 17:28
| Ответить | Цитировать | Написать  
Строка исправленного текста над строкой ошибочного текста, css?
    #39815453
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
Первое что на ум приходит - "position:relative" ну и так далее.
...
Рейтинг: 0 / 0
20.05.2019, 18:09
| Ответить | Цитировать | Написать  
Строка исправленного текста над строкой ошибочного текста, css?
    #39815483
Руслан Дамирович
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Руслан Дамирович
Участник
fkthat,

а второе - что на лечении CSS по скриншотам можно даже организовать телешоу
...
Рейтинг: 0 / 0
20.05.2019, 19:03
| Ответить | Цитировать | Написать  
Строка исправленного текста над строкой ошибочного текста, css?
    #39815484
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
Руслан Дамировичfkthat,

а второе - что на лечении CSS по скриншотам можно даже организовать телешоу
Ну, тут, как раз, вполне себе понятно, какого результата чел. добиться хочет.
...
Рейтинг: 0 / 0
20.05.2019, 19:05
| Ответить | Цитировать | Написать  
Строка исправленного текста над строкой ошибочного текста, css?
    #39815493
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                line-height: 1.5em;
            }

            .wrap {
                display: inline-block;
                position: relative;
                height: 2em;
            }

            .correct {
                position: absolute;
                line-height: 1em;
                color: #0f0;
            }

            .wrong {
                display: block;
                margin-top: 1em;
                line-height: 1em;
                color: #f00;
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum <span class="wrap"><span class="correct">dolor</span><span class="wrong">sit</span></span> amet.</p>
    </body>
</html>
...
Рейтинг: 0 / 0
20.05.2019, 19:32
| Ответить | Цитировать | Написать  
Строка исправленного текста над строкой ошибочного текста, css?
    #39815764
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
я бы попробовала с
::before + attr

.correct::before{content: attr(wrong); position: absolute; ....}
<span class="correct" wrong="неправильный текст">dolor</span>
...
Рейтинг: 0 / 0
21.05.2019, 13:08
| Ответить | Цитировать | Написать  
Строка исправленного текста над строкой ошибочного текста, css?
    #39815876
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
если возможное налезание вронгов не волнует..
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE html>
<html>
<head>
    <style>
        p {line-height: 1.6em}
        .correct {position: relative; color: #0f0}
        .correct::before {content: attr(wrong); display: block; position: absolute; top: -.9em; left: -50%; right: -50%; text-align: center; color: #f00; text-decoration: line-through}
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            <span class="correct" wrong="Sit">Dolor</span> <span class="correct" wrong="dolor">sit</span> <span class="correct" wrong="DOLOR">SIT</span>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    </p>
</body>
</html>
...
Рейтинг: 0 / 0
21.05.2019, 15:41
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Строка исправленного текста над строкой ошибочного текста, css?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1443778]:
 0ms
get settings:
 11ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 66ms
get topic data:
 10ms
get first new msg:
 7ms
get forum data:
 3ms
get page messages:
 47ms
get tp. blocked users:
 1ms
others: 228ms
total:  395ms
созд. / загр.: 395ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]