Предотврощение переноса текста. flexbox

178
26 октября 2021, 11:10

Хочу сделать width hr элемента, равную 100% свободного места. Но чтобы название было в одну строчку, без переноса, как на фото. И линия должна быть адаптивной при изменении длины текста

.parent-div { 
  display: flex; 
} 
 
.black-line { 
  align-self: center; 
  border-top: 1px solid black; 
  width: 100%; 
  margin-left: 5px; 
}
<div class="parent-div"> 
  Login attempt 
  <hr class="black-line"> 
</div>

https://jsfiddle.net/denchauskas/985ameyv/5/

Answer 1

Это делается с помощью flex-grow. А ещё плохо использовать hr для визуального оформления, поэтому заменил её псевдоэлементом.

div { 
  display: flex; 
} 
 
div::after { 
  content: ""; 
  align-self: center; 
  border-top: 1px solid black; 
  margin-left: 5px; 
  flex: 1 0 0px; 
}
<div>Login attempt</div>

Answer 2

.parent-div { 
 display: flex; 
} 
 
.black-line { 
align-self: center; 
border-top: 1px solid black; 
width: 100%; 
margin-left: 5px; 
} 
 
.text{ 
  white-space: nowrap; 
}
 <div class="parent-div"> 
   <span class='text'>Login attempt</span> 
   <hr class="black-line"> 
 </div>

READ ALSO
Какие HTML теги моветон?
HTML

Какие HTML теги моветон?

Какие HTML теги при оформлении css считается моветон ?

 158
Как воспроизвести &lt;audio&gt; с задержкой?
HTML

Как воспроизвести <audio> с задержкой?

Есть некий звук, который нужно воспроизвести через 3 секунды после загрузки станицы

 217
CSS | Свойство float:left, блоки налазят друг на друга
HTML

CSS | Свойство float:left, блоки налазят друг на друга

я задаю для block-left-helper-img float:left;, чтобы текст отображался по правой сторонеНо получаю такой результат

 180
Заполнить массив по кругу
c++

Заполнить массив по кругу

Вот здесь заполнено, но не в нужную сторону, помогите развернуть пожалуйста, очень срочно требуется(((

 165