Html, css верстка

324

25 сентября 2021, 05:00

Есть верстка следующего вида:

<div class="container">
   <div class="block">
      <h3 class="title>a</h3>
      <p class="description>bb</p>
   </div>
   <div class="block">
      <h3 class="title>aa</h3>
      <p class="description>bbbb</p>
   </div>
   <div class="block">
      <h3 class="title>aaa</h3>
      <p class="description>bbbbbb</p>
   </div>
</div>

Как сделать такой вывод используя только html и css, не задавая размеры:

a
b
b
aa
bb
bb
aaa
bbb
bbb
bbb

Если описывать словами, то размер description должен быть равен размеру title.

То есть, description должен подстраиваться под размер title, и если что, то переносить слова на новую строку.

Answer 1

Для современных браузеров можно так:

.block { 
  width: min-content; 
} 
 
.title { 
  white-space: nowrap; 
} 
 
.description { 
  word-break: break-word; 
  word-wrap: break-word; 
  overflow-wrap: break-word; 
}

<div class="container"> 
  <div class="block"> 
    <h3 class="title">a</h3> 
    <p class="description">bb</p> 
  </div> 
 
  <div class="block"> 
    <h3 class="title">aa</h3> 
    <p class="description">bbbb</p> 
  </div> 
 
  <div class="block"> 
    <h3 class="title">aaa</h3> 
    <p class="description">bbbbbb</p> 
  </div> 
</div>

Answer 2

Может есть и другой вариант, но этот вроде рабочий.

.block { 
  display: flex; 
  flex-direction: column; 
  width: min-content; 
} 
 
.title, 
.description { 
  margin: 0; 
} 
 
.title { 
  width: max-content; 
} 
 
.description { 
  word-wrap: anywhere; 
  width: 100%; 
}

<div class="container"> 
  <div class="block"> 
    <h3 class="title">a</h3> 
    <p class="description">bb</p> 
  </div> 
 
  <div class="block"> 
    <h3 class="title">aa</h3> 
    <p class="description">bbbb</p> 
  </div> 
 
  <div class="block"> 
    <h3 class="title">aaa</h3> 
    <p class="description">bbbbbb</p> 
  </div> 
   
  <div class="block"> 
    <h3 class="title">aaaaaaaaaaaaaa</h3> 
    <p class="description">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p> 
  </div> 
  <div class="block"> 
    <h3 class="title">aaaa</h3> 
    <p class="description">bbbbbbbbbbbb</p> 
  </div> 
</div>