Текст внутри кольцевой диаграммы в реагировать

Вы можете использовать встроенный элемент, такой как , который будет обрабатывать border-bottom как подчеркивание:

    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    

и CSS:

span {
    border-bottom: 4px solid black;
}
del {
    color: red;
}

Демоверсия здесь.

Результат с использованием разметки выше:

[/g4]

EDIT:

1 .

Расширение @ g1] ответа @ aefxx , если вы можете использовать CSS3, попробуйте это:

.strike {
    background-image: -moz-linear-gradient(top , rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 34px, #000000 34px, #000000 38px);
    background-repeat: repeat-y;
    background-size: 100% 38px;
}
p {
    line-height: 38px;
}
p:before {
    background: #fff;
    content:"\00a0";
    display: inline-block;
    height: 38px;
    width: 50px;
}
del span {
    color: red;
}

Демо здесь - это будет работать только в последних браузерах, включая Firefox и Chrome.

Результат в Chrome:

[/g5]

2.

Если вы довольны обоснованным текстом:

p,span {
    border-bottom: 4px solid black;
    line-height: 30px;
    text-align: justify;
    text-indent: 50px;
}
p>span {
    padding-bottom: 5px;
    vertical-align: top;
}
del span {
    border-bottom: 0 none;
    color: red;
}

Демонстрация здесь. Есть некоторые проблемы с высотой линии, но их должно легко отобразить

Результат в Chrome:

[/g6]

Кроме этого, я боюсь, что вам придется обернуть ваши строки в некоторых контейнерах.