Создание ширины одного элемента зависит от его ширины брата.

Question

Я пытаюсь создать виджет таким образом, чтобы субтитры никогда не были длиннее названия. Таким образом, заголовок будет контролировать ширину виджета, а субтитр будет обернут, если он станет шире, чем заголовок. И я пытаюсь сделать это без JavaScript, если это возможно.

Я получил близко (см. Ниже фрагмент). Я смог сделать субтитры искусственно короткими, но даже в этом случае строка, по которой она по какой-то причине расширялась, соответствовала всему пространству контейнера, а не просто пространству, используемому его потомком! на самом деле, пространство, которое оно занимало, именно то, что было бы, если бы оно не было обернуто.

#container { 
 
    background: #DDD; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
#subtitle { 
 
    flex-basis: 0; 
 
}

<div id="container"> 
 
    <div class="row"> 
 
    <h1 id="title">Title that is fairly long</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3> 
 
    </div>   
 
</div>

мне нужно держать субтитров в потоке (не position:absolute), и название должно быть в состоянии обернуть, если он получает супер длинный (так что это не просто перекинуться выключить страница). Есть ли способ иметь два ряда, один под другим, и один может быть только до тех пор, пока другой?

Answer 1

Похоже таблицы CSS мне:

#container { 
 
    background: #DDD; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.row > * { 
 
    display: table-cell; 
 
} 
 
.row:after { 
 
    content: " "; 
 
    display: table-cell; 
 
} 
 
#title { 
 
    width: 1px; 
 
    white-space: nowrap; 
 
}

<div id="container"> 
 
    <div class="row"> 
 
    <h1 id="title">Title that is fairly long</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3> 
 
    </div>   
 
</div>

width:1px на название вызывает этот столбец разрушаться. white-space:nowrap предотвращает обертку заголовка. Поскольку он использует табличный макет, эта комбинация позволяет определить ширину столбца по названию, и поэтому субтитры следует вдоль. :after предоставляет гибкую колонку для заполнения таблицы.

(После того, как CSS Grid becomes available, что может быть предпочтительным.)

---

Вы упомянули длинные названия. С этой возможностью вам нужно переключиться на Javascript. (The Javascript ниже должен быть где-то после того, как секция влияет или будет работать на странице загрузки.)

var title = document.getElementById('title'), 
 
    subtitle = document.getElementById('subtitle'), 
 
    subtitleResize = function() { 
 
     subtitle.style.width = title.clientWidth + 'px'; 
 
    }; 
 
window.addEventListener('resize', subtitleResize, false); 
 
subtitleResize();

#container { 
 
    background: #DDD; 
 
} 
 

 
#title { 
 
    display:inline-block; 
 
}

<div id="container"> 
 
    <div class="row"> 
 
    <h1 id="title">Title that is fairly long</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3> 
 
    </div>   
 
</div>

Answer 2

Вы должны добавить white-space: nowrap; к тега h1, который делает всю ширину

Please check the fiddle answer here