Question 1884 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why isn't text overflow being applied to my inline element? – WordPress

I have a template like the image below, I want to add text-overflow: ellipsis; feature to the name

enter image description here

But this feature is not added, where am I doing wrong? I want the arrangement of the sections to remain unchanged

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;
}

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

    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>


  2. 0

    If you check inside your dev tools, you will see that width isn’t being applied because of the display type:

    Dev tools show why it isn't working

    Simply adding display: inline-block solves your issue of the overflow not working as the box now respects the width you gave it. You also need to add some more characters, as admin is 5 long, and your width is 12, so that overflow is never going to show up in your example.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search