Я использую text-decoration: line-through
в CSS, но я не могу найти способ изменить толщину линии без неэлегантных хаков, таких как <hr>
или наложения изображений.
Есть ли элегантный способ указать толщину линии?
Я использую text-decoration: line-through
в CSS, но я не могу найти способ изменить толщину линии без неэлегантных хаков, таких как <hr>
или наложения изображений.
Есть ли элегантный способ указать толщину линии?
Вот чистый метод CSS, который не требует лишних элементов оболочки. В качестве дополнительного бонуса вы можете не только настроить толщину вычеркивания, но вы можете управлять его цветом отдельно от цвета текста:
.strikeout {
font-size: 4em;
line-height: 1em;
position: relative;
}
.strikeout::after {
border-bottom: 0.125em solid red;
content: "";
left: 0;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}
<span class="strikeout">Struck out text</span>
Это, кажется, давний вопрос без идеального решения для многострочных зачеркиваний.
Удобно, используя градиенты CSS, вы можете легко настроить толщину линии следующим образом:
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
Смотрите префикс демо и полного поставщика здесь: http://codepen.io/pearlchen/pen/dhpxu
короткий ответ: нет. он зависит от шрифта, он одинаковый для толщины подчеркивания - он изменяется с толщиной текста
У меня есть идея, но для этого потребуется добавить дополнительный элемент для каждого уровня толщины.
HTML
<span><strike>test test</strike></span><br />
<span id="test"><strike> </strike></span>
CSS
span {height:1em}
#test {position:relative;top:-1.3em}
Кстати, пробелы во втором прогоне являются специальными - вам придется использовать alt + 0160 или alt + 255.
Вы можете использовать пиксельный блок слишком на отрицательном верхнем, когда ull попытается точно установить его.
Существует еще одна альтернатива, которая включает в себя использование первого текстового оформления, а затем стиль <strike>
или <del>
и посмотреть, можете ли вы подталкивать его вертикально, не перемещая текст с ним.
HTML
<span><strike>test test</strike></span>
CSS
span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}
Оба работают нормально, но не забывайте использовать переходную идею doctype. <strike>
устарел.
Нет.
Однако, если сквозной цвет совпадает с цветом текста, вы можете легко уйти с использованием пользовательского изображения в фоновом режиме.
Если вам требуются разные цвета, то наложение пользовательского сквозного изображения является единственным способом.
Я понимаю, что это старый, но есть способ сделать это с помощью вложенных тегов span:
<span style="text-decoration: line-through; font-size: 2em;">
<span style="font-size: 0.5em; vertical-align: middle;">
Striked Text
</span>
</span>
Зачеркивание зависит от размера шрифта, поэтому, если вы удвоите внешний диапазон, он сделает линию в два раза толще. Затем вам нужно уменьшить внутреннюю пополам. Требуется выравнивание по вертикали, или линия слишком высока, что означает, что она почти является надстрочной.
В действии: http://jsfiddle.net/moodleboy/deep3qw8/
Работает в Chrome/FF, но не Safari, IE10 или Opera. Работает на Chrome на Mac, но не на Windows.
Я нашел другой подход для многострочного текста:
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
http://output.jsbin.com/weqovenopi/1/
Этот подход предполагает повторение изображения (ширина 1px и высота npx). Также он работает независимо от размера шрифта.
Только один недостаток - фон отображается под текстом.
Толщина линии определяется шрифтом (семьей, размером и т.д.). В CSS нет положения для изменения этого http://www.w3.org/TR/REC-CSS1/#text-decoration
Это не отвечает на вопрос, но имеет значение в том смысле, что он решает проблему отсутствия уникальной удачной атаки с использованием скриптов. Я не пурист, но я считаю, что это решение для x-браузера.
<html>
<script src="/js/jquery/jquery.js"></script>
<script>
function do_strike_out(idx)
{
$(this).wrap("<span style='position:relative;left:0px;top:0px;'>").
before( "<span style='margin-top:10px;border-top:1px solid #FF0000;"+
"position:absolute;width:100%;left:0px;'></span>" ).
wrap("<span style='position:relative;left:0px;top:0px;'>");
}
$(function(){
$('.strike_out').each(do_strike_out);
});
</script>
<body>
A jquery hack to do colored strike-through <span class='strike_out'>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others.
</body>
</html>
Я не мог найти подходящий метод здесь, поэтому я использовал background-image с линейным градиентом и бывшими единицами длины CSS.
К сожалению, это означает, что при использовании разных граней шрифта зачеркивание будет выполняться в несколько ином положении (если шрифты имеют разную высоту x).
.container {
width: 300px;
}
.multiline-strikethrough {
display: inline;
background-image: linear-gradient(transparent 0.8ex, red 0.8ex, red 1.5ex, transparent 1.5ex);
}
.alt-1 {
font-family: sans-serif;
font-size: 2rem;
}
.alt-2 {
font-family: sans-serif;
font-size: 4rem;
line-height 1;
}
<div class="container">
<p class="multiline-strikethrough">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>
<div class="container">
<p class="multiline-strikethrough alt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>
<div class="container">
<p class="multiline-strikethrough alt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>