Линия переменного размера в тексте

#html #css

Как сделать подобные поля в html?
Нужно, чтобы линии занимали все пространство до правого края страницы.


    

Ответы

Ответ 1

.list {
  font-family: monospace;
}
.list-row {
  /* Ненужное свойство */
  display: block;
  /* Чтобы учитывалась высота .list-row-title */
  overflow: auto;
}
.list-row-title {
  /* Распологает заголовок слева, чтобы расположить div'ы рядом */
  float: left;
  /* Отступ полосы от заголовка */
  margin-right: 0.5em;
}
.list-row-field {
  /* Занять всё оставшееся пространство */
  overflow: auto;
  /* Высота размеров со строку */
  height: 1.2em;
  /* Снизу граница, напоминающая подчёркивание */
  border-bottom: 1px solid black;
  color: grey;
}

  

    
Ф.И.О. пациента
    

  
  

    
Возраст
    

  
  

    
Ф.И.О. личного врача
    
Иванчук И.И.
  



Ответ 2

Например:



ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  overflow: hidden;
}

span {
  display: inline-block;
  position: relative;
  padding-right: 15px;
  font-family: monospace;
}

span:after {
  content: '';
  position: absolute;
  left: 100%;
  right: -9999px;
  bottom: 0;
  height: 1px;
  background: #000;
}

  

    Ф.И.О. пациента
  
  

    Возраст
  
  

    Ф.И.О. лечащего врача
  



Ответ 3

У каждой ли сделать border-bottom к примеру , а текст внутри , допустим span опустить
чуть ниже и дать белый фон , что бы он закрыл часть текста . Добавил пример , цвет
фона берете и все.

Пример на JSFDD

ul {
  width:300px ;
  margin:0;
  padding:0;
  list-style:none;
}
li {
  margin-bottom: 10px;
  width: 100%;
  display: block;
  border-bottom: 1px solid #000;
}
span {
  background: #fff;
  display: inline-block;
  padding:2px 5px;
  margin-bottom: -5px;
}


Ответ 4

Идея состоит в следующем: у вас есть строка, состоящая из двух частей:
свойства и его значения. Помимо этого, есть линия, заполняющая свободное пространство.

Чтобы разнести свойство и значение по разным углам, можно использовать тип отображения
display: flex с настройкой выравнивания justify-content: space-between;.

Самый простой способ организовать нужную вам линию: пустить ее на всю ширину блока
и чем-то перекрыть.

Поскольку линия должна начинаться от свойства, ему можно задать подходящий цвет фона
и небольшой отступ. Тогда линию можно будет спозиционировать абсолютно относительно
блока и с помощью z-index поместить под свойство.

При этом точно такие же отступы можно задать значению, чтобы выровнять его по высоте
со свойством. Вот только фон ему задавать не нужно, чтобы значение оказалось как бы
на этой самой упомянутой линии.

Чтобы многострочные свойства не ломали верстку, можно заранее позаботиться об этом,
ограничив максимальную ширину свойства и значения, а также запретив перенос слов с
помощью white-space: nowrap. Не влезающие слова можно спрятать с помощью overflow:
hidden, а чтобы это выглядело получше, можно добавить многоточие с помощью css-свойства
text-overflow: ellipsis.



body {
  padding-right: 80px;
}

.line {
  font-family: monospace;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.line::before {
  background-color: #ccc;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 5px;
  bottom: 5px;
  z-index: 1;
  height: 1px;
}

.property,
.value {
  padding: 5px;
  max-width: 48%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}

.property {
  background-color: #fff;
}

.value {
  color: #bada55;
}

  
Ф.И.О. лечащего врача
  
Сидоров А.И.


  
Ф.И.О. пациента
  
Протуберанцевич Д.М.


  
Какое-то очень длинное длинное название свойство, не влезающее
в блок
  
Значение



Ответ 5

Можно применить здесь flexbox. И нужно никаких переполнений (overflow), перекрытия
блоков и абсолютного позиционирования.



.list {
  font-family: monospace;
}

.list-row {
  display: flex;
  /* расположить элементы по линий шрифта */
  /* будет полезно если захотите разные размеры шрифта для левой и правой частей */
  align-items: baseline;
}

.list-row-title {
  /* небольшой отступ, чтобы строки были равной высоты */
  padding-bottom: 3px;
}

.list-row-field:before {
  /* неразрывный пробел чтобы блок имел верную высоту */
  content:"\00a0";
}

.list-row-field {
  margin-left: 10px;
  /* занять всё оставшееся пространство */
  flex: 1;
  /* снизу граница, напоминающая подчёркивание */
  border-bottom: 1px solid black;
  /* если хотите расположить текст справа */
  text-align: right;
}

  

    
Ф.И.О. пациента
    

  
  

    
Возраст
    

  
  

    
Ф.И.О. личного врача
    
Петров