Добавить строку в конец тега h с помощью CSS или jQuery
Мне нужно добавить строку в конец тега h с помощью CSS, как это изображение:
Вот HTML-код:
<div class = "titleContainer">
<h1 class = "titleLeft">how We turn your</h1>
<div class = "horizontalLineRight orangeLine" style = "width: 213px;"></div>
</div>
Я установил ширину horizontalLineRight с помощью jQuery:
jQuery( document ).ready(function($) {
$( window ).resize(function() {
$( '.titleContainer' ).each(function() {
var titleContainerWidth = $(this).width();
var titleLeftWidth = $(this).find( '.titleLeft' ).outerWidth();
var titleRightWidth = $(this).find( '.titleRight' ).outerWidth();
remainingRight = titleContainerWidth - titleLeftWidth - 2;
remainingLeft = titleContainerWidth - titleRightWidth - 2;
$(this).find( '.horizontalLineRight' ).css("width", remainingRight);
$(this).find( '.horizontalLineLeft' ).css("width", remainingLeft);
});
});
});
Он отлично работает, когда тег h не заполняет 100% ширины контейнера.
Но когда я меняю ширину, линия исчезает. Я думаю, мне нужно поместить <div class = "horizontalLineRight orangeLine"> в <div class = "titleContainer">, но я не знаю, как рассчитать оставшуюся ширину (свободное пространство) с помощью jQuery.
@AnisR. Спасибо за ваш быстрый ответ. но я попробовал безуспешно. Моя проблема в ширине этого элемента. Как установить ширину этого элемента?
@Situdio, пожалуйста, покажите нам разметку, которую вы использовали, а не картинку. Отредактируйте свой вопрос, нажмите кнопку <> или нажмите Ctrl + M, чтобы открыть редактор на сайте, и создайте исполняемый фрагмент, чтобы показать нам, что у вас есть.
@Situdio Подробней выложу в ответ.
@Taplar, теперь вопрос отредактирован с использованием необходимого кода, если вы хотите проголосовать повторно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать пустой диапазон с некоторым стилем, чтобы решить вашу проблему. Попробуйте добавить <span id='myLine'></span> после тега h с некоторыми стилями CSS:
#myLine {
width: 80%; /*or any percentage that makes it look good for you*/
/*also set the border bottom to look the way you want, e.g.:*/
border-bottom: 2px solid orange;
}Прочтите обновленный вопрос.
Если вы знаете, с каким словом (или группой слов) вы хотите разместить строку рядом, вы можете обернуть эти слова внутри span и использовать display: flex + ::after на span, чтобы получить желаемый эффект, показанный на вашем первом изображении.
<h1>How we turn <span>your</span> business requirements into</h1>
<style>
h1 span {
width: 100%;
background: black;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 span:after {
content: "";
background: orange;
border-radius: 4px;
display: block;
height: 6px;
min-width: 50%;
flex: 1;
margin-left: 16px;
}
</style>
Вот песочница с полным примером.
Если вы просто хотите, чтобы он занимал оставшуюся ширину пространства заголовка, вам не нужно выполнять какие-либо махинации с jQuery с этим подходом.
Ваша идея хороша, но не работает. потому что ширина не статична. Он не работает должным образом на мобильных устройствах.
Я не уверен, что понимаю, что вы имеете в виду. Вы смотрели ссылку codeandbox? Строка в моем примере занимает все оставшееся пространство справа от текста, который вы хотите разбить.
Вы можете попробовать, как показано ниже:
.titleContainer {
max-width:400px;
animation:change 3s linear infinite alternate;
}
.titleLeft {
background:
/*the line placed at the bottom of the container*/
linear-gradient(orange,orange) 0 calc(100% - 0.5em)/100% 2px no-repeat;
background-color:#000;
}
.titleLeft span {
/*inherit the background-color and hide the line under the text*/
background-color:inherit;
padding:0 5px;
color:#fff;
}
@keyframes change {
to {max-width:100px }
}<div class = "titleContainer">
<h1 class = "titleLeft"><span>how We turn your</span></h1>
</div>
<div class = "titleContainer">
<h1 class = "titleLeft" style = "background-color:red;"><span>how We turn your</span></h1>
</div>Если вам нужна прозрачность, вы можете попробовать следующее:
.titleContainer {
max-width: 400px;
animation: change 3s linear infinite alternate;
overflow:hidden; /*you need to hide the extra line width*/
}
.titleLeft span {
position: relative;
padding: 0 5px;
}
/*the line*/
.titleLeft span:after {
content: "";
position: absolute;
left: 100%; /*put at the end of the text*/
width: 100vw; /*use a big width to be sure to cover the need space*/
bottom: 0.5em;
height: 2px;
background-color: blue;
}
@keyframes change {
to {max-width: 100px}
}
body {
background:linear-gradient(to right,pink,red);
}<div class = "titleContainer">
<h1 class = "titleLeft"><span>how We turn your</span></h1>
</div>Какой красивый трюк. Это действительно поучительно. но есть ли способ не устанавливать цвет фона для диапазона? Текст имеет свой фон.
@Situdio вам не нужно устанавливать фон, вы просто наследуете тот, который определен в верхнем div, чтобы трюк работал ... поэтому, если у текста есть собственный фон, просто используйте его в верхнем div
@Situdio проверьте обновление, чтобы лучше понять
Я имел в виду, что за текстом есть фоновое изображение. не фон для текста.
@Situdio поделитесь кодом, где есть фоновое изображение, и я скорректирую свой код
@Situdio Я добавил еще один способ с прозрачностью
Спасибо за отличное решение. Работает как часы.
@Situdio не забудьте принять ответ;)
Может быть, вы можете использовать пустой диапазон (например,
<span id='myLine'></span>) сразу после тега h и стилизовать его с помощью CSS?