如果你检查你的开发工具，你会发现width没有被应用，因为display类型：

只需添加display: inline-block就可以解决溢出问题，因为框现在遵循您提供的width。您还需要添加更多字符，因为admin的长度为5，而您的宽度为12，因此溢出不会在示例中显示。

p.meta {
  font-size: 14px;
  border-bottom: 1px solid #eeeeee;
  padding: 5px;
  margin: 0;
}

p.meta img.avatar {
  position: inherit;
  width: 32px;
  float: right;
  height: auto;
  border: 0;
  padding: 0;
  margin-left: 7px;
  background: none;
  border-radius: 3px;
  margin: 0;
  box-shadow: none;
}

p.meta strong.woocommerce-review__author {
  font-size: 14px;
  font-weight: normal;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 12ch;
  display: inline-block;
}

p.meta em.woocommerce-review__verified {
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: #000000;
}

p.meta time.woocommerce-review__published-date {
  font-size: 14px;
  font-weight: normal;
  color: #000000;
  float: left;
}

<p class="meta">
  <img alt="" src="http://2.gravatar.com/avatar/22be747127f7682d97dcfdba7c349038?s=32&amp;d=mm&amp;r=g" srcset="http://2.gravatar.com/avatar/22be747127f7682d97dcfdba7c349038?s=64&amp;d=mm&amp;r=g 2x" class="avatar avatar-32 photo" height="32" width="32"
    loading="lazy" decoding="async">
  <strong class="woocommerce-review__author">admin with more letters than 12</strong>
  <em class="woocommerce-review__verified verified"> | verified owner</em>
  <time class="woocommerce-review__published-date" datetime="2023/3/10 15:53:05">2023/3/10</time>
</p>

p.meta {
  font-size: 14px;
  border-bottom: 1px solid #eeeeee;
  padding: 5px;
  margin: 0;
  width: 100%;
  float: right;      
}

p.meta img.avatar {
  position: inherit;
  width: 32px;
  float: right;
  height: auto;
  border: 0;
  padding: 0;
  margin-left: 7px;
  background: none;
  border-radius: 3px;
  margin: 0;
  box-shadow: none;
}

p.meta strong.woocommerce-review__author {
  font-size: 14px;
  font-weight: normal;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 12ch;
  float: right;
}

p.meta em.woocommerce-review__verified {
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: #000000;
}

p.meta time.woocommerce-review__published-date {
  font-size: 14px;
  font-weight: normal;
  color: #000000;
  float: left;
}

<p class="meta">
  <img alt="" src="http://2.gravatar.com/avatar/22be747127f7682d97dcfdba7c349038?s=32&amp;d=mm&amp;r=g" srcset="http://2.gravatar.com/avatar/22be747127f7682d97dcfdba7c349038?s=64&amp;d=mm&amp;r=g 2x" class="avatar avatar-32 photo" height="32" width="32"
    loading="lazy" decoding="async">
  <strong class="woocommerce-review__author">admin</strong>
  <em class="woocommerce-review__verified verified"> | verified owner</em>
  <time class="woocommerce-review__published-date" datetime="2023/3/10 15:53:05">2023/3/10</time>
</p>