caption元素特性与文字排版演示页面

展示

代码

• HTML：

  <h4 class="fill">table-caption方法</h4>
  <section class="section-1">
    <h2>网站slogon<br>科技以人为本</h2>
    <p>我是对slogon内容的解释与说明，我的宽度不能超过slogon文字区域宽度，无论上面标题字号大小是多少</p>
  </section>
  
  <h4 class="fill">min-content方法</h4>
  <section class="section-2">
    <h2>网站slogon<br>科技以人为本</h2>
    <p>我是对slogon内容的解释与说明，我的宽度不能超过slogon文字区域宽度，无论上面标题字号大小是多少</p>
  </section>

• CSS：

  .section-1 {
    display: table;
  }
  .section-1 p {
    display: table-caption;
    caption-side: bottom;
  }
  .section-2 {
    width: min-content;
    white-space: nowrap;
  }
  .section-2 p {
    white-space: normal;
  }