<div class="support">

  Your browser does not support <code>text-box-trim</code>.

</div>

<div class="container">

  <div class="trimmed">

    <h1>My title</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora error saepe, soluta distinctio qui, modi nemo iure harum nobis consectetur veritatis nesciunt voluptate? Sed tempora autem quis vitae eligendi aperiam!</p>

  </div>

​

  <div>

    <h1>My title</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, asperiores quae exercitationem error tenetur perferendis est porro sed modi ipsum officiis voluptates distinctio, debitis, quidem quia animi ab eveniet repudiandae.</p>

  </div>

</div>

body {

  margin: 0;

}

​

.container {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 20px;

}

​

h1 {

  margin-block-start: 20px;

  margin-block-end: 30px;

  background: blue;

}

​

p {

  background: red;

}

​

.trimmed h1 {

  text-box-trim: both;

  text-box-edge: cap alphabetic;

}

​

.support {

  border: 2px solid red;

  text-align: center;

  padding: 1em;

  margin: 1em;

  font-size: 1.2rem;

}

​

@supports (text-box-trim: both) and (text-box-edge: cap alphabetic) {

  .support {

    display: none;

  }

}

​