Question 407253 in Html Question posted in
Some basic documentation can be found here.

Html – How to align SVG icons in text without using flexbox while maintaining truncation?

.box {
  width: 230px;
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

svg {
  /* The size of the icon can vary */
  width: 24px;
  height: 24px;
}
<div class="box">
  <span class="text truncate">
    This is text
    <svg width="48" height="48" viewBox="0 0 48 48">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
  </span>
</div>

In this example we have some Text with an SVG in it. I gave the SVG a height & width of 24px but that size may change.

Is there a way to consistently center the SVG regardless of the size of the SVG without breaking the truncation? (Adding display: flex breaks the ellipsis truncation).

I have also tried the strategy listed here in this blog post but it requires the SVG to have height/width of 1em, if I increase that size I’m not sure how to dynamically calculate the top value.

Tags:

2

Answers


  1. 0

    Change the viewbox to the real values used in the path (4 4 40 40 not 0 0 48 48),
    Add css vertical-align.
    Do not duplicate css width and height attributes

    .box {
  width         : 230px;
  border        : 1px solid black;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  }
svg {
  width          : 20px;  /* height is the same because aspect-ratio is 1/1 on default */
  vertical-align : bottom;
  }
    <div class="box">
  <span class="text truncate">
    This is text
    <svg viewBox="4 4 40 40">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
  </span>
</div>

    .

    Also with em unit… -> vertical-align : sub; or vertical-align : middle;

    .box {
  font-size     : 16px;
  width         : 14em;
  border        : 1px solid black;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  }
svg {
  width          : 4em;  /* === height  (aspect-ratio: 1/1 on default) */
  vertical-align : middle;
  }
    <div class="box">
    This is text
    <svg viewBox="4 4 40 40">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
</div>
    Login or Signup to reply.
  2. 0

    Yes — vertical-align: middle.

    .box {
  width: 230px;
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 1em;
}

svg {
  aspect-ratio: 1;
  vertical-align: middle;
}

.b1 svg {
  width: 24px;
}

.b2 svg {
  width: 48px;
}

.b3 svg {
  width: 96px;
}
    <div class="box b1">
  <span class="text truncate">
    This is text
    <svg viewBox="0 0 48 48">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
  </span>
</div>

<div class="box b2">
  <span class="text truncate">
    This is text
    <svg viewBox="0 0 48 48">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
  </span>
</div>


<div class="box b3">
  <span class="text truncate">
    This is text
    <svg viewBox="0 0 48 48">
      <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
    and it should truncate
  </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search