Tips for positioning SVG icons within text without relying on flexbox and still ensuring proper 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 some example content
    <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>
    while maintaining truncation at the end
  </span>
</div>

This instance presents Text paired with an SVG element. The SVG has specific dimensions, but these may change dynamically.

Is there a method to consistently align the SVG in the center irrespective of its dimensions without disrupting the truncation effect? (Applying display: flex interferes with the ellipsis).

I have tested the technique outlined in the aforementioned blog post, which necessitates assigning the SVG a height and width of 1em. If I increase this size, I am uncertain how to calculate the top value dynamically.

htmlcss

Answer №1

Adjust the viewbox to match the actual values used in the path (4 4 40 40 instead of 0 0 48 48),
Include css for vertical-align.
Avoid redundant declarations of css width and height attributes

.box {
  width         : 230px;
  border        : 1px solid black;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  }
svg {
  width          : 20px;  /* height stays the same due to aspect-ratio being 1/1 by 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>

.

Additionally using 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 by 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>

Answer №2

Sure thing — vertical-align: middle.

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

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

.box1 svg {
  width: 24px;
}

.box2 svg {
  width: 48px;
}

.box3 svg {
  width: 96px;
}
<div class="container box1">
  <span class="text truncate">
    This is some 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 will be truncated if too long
  </span>
</div>

<div class="container box2">
  <span class="text truncate">
    This is some 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 will be truncated if too long
  </span>
</div>


<div class="container box3">
  <span class="text truncate">
    This is some 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 will be truncated if too long
  </span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery's ready function fails to trigger after using a rails link_to

I have implemented the following JavaScript code to create a "fade in" effect for an image triggered by a scroll event. However, the .hide function I am using to hide the image initially only works when the page loads at localhost:3000. Once I navigate ba ...

javascriptjqueryhtmlcssruby-on-rails

Is there a way for me to eliminate the white background from my transparent icons?

I have some forum icons with a white background that I want to make transparent. Can anyone suggest a way to achieve this using CSS or a software tool? Thank you. ...

htmlcss

moving text on the screen using the mouse drag function

I am attempting to design a text block with precise dimensions for both width and height. In the event that the text exceeds these dimensions, I desire the functionality to drag the text horizontally in order to reveal the remainder of the content (by cl ...

javascriptjqueryhtmlcss

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas. let canvas=qrRef.current.querySelector("canvas&qu ...

javascripthtmlcsscanvas

Background image not adhering to the page width as expected within the Bootstrap framework

I feel like I'm losing my mind. Currently, I am in the process of designing a section that consists of four photo boxes - two at the top and two below. In order to achieve this layout, I have turned to utilizing Bootstrap. Unfortunately, this parti ...

jqueryhtmlcsstwitter-bootstrapfrontend

Tips for center-aligning layouts in Angular Material

I am struggling with the Angular Material flex layout, so I took this directly from the Angular Material website. Based on the documentation for layout container, items are arranged in a row with a max-height of 100% and max-width matching the width of th ...

cssangularjstypescriptangular-materialmaterial-design

What is the best method for removing a tag that is only visible through the inspect element feature on my website?

I recently added a widget to my website that unfortunately includes a watermark that cannot be removed, even with payment. This is the code snippet I inserted: <!-- TradingView Widget BEGIN --> <div class="tradingview-widget-container"& ...

javascripthtmljqueryajaxtradingview-api

In certain parts of the webpage, the <a> tag appears to be clickable, but unfortunately, the linking

I have a collection of <li> elements, each containing an <a> child element. Within each <a>, there is an <img> tag along with some text. My issue is that the linking functionality only works in certain areas of the <a> element ...

htmlcss

placing an image in the lower right corner of a text block

Is there a way to position a floating image in the bottom-right corner of text? I have a div with a colored background containing text, and I want to add an image to it at the bottom-right corner. Can CSS help with this? <div id="myText"> A lot of ...

htmlcssimagecss-floatalignment

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Tips for choosing text within an HTML <label> tag

Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...

javascriptjqueryhtml

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

Tips for sorting only the primary categories and excluding the subcategories in the Search & Filter plugin

I am using a Search & Filter plugin for WordPress that includes a Filter feature. do_shortcode( '[searchandfilter submit_label="Filter" types="checkbox" taxonomies="category"]' ); My issue is that when using the filter, it displays all categori ...

phphtmlwordpress

Creating a curved div with clip-path using Tailwind CSS

I would like to create a design similar to this https://i.sstatic.net/JghaP.png Using clip path and stacked components, I have managed to achieve the following look with this code snippet: <div className="relative w-full lg:h-[220px] 2xl:h-80&quo ...

cssnext.jstailwind-csstailwind-ui

Adding a pathway to a clip path: a step-by-step guide

While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...

cssimagesvg

Encountering a problem with the divLogoBlock element in the code snippet below

I am experiencing an issue with the code below. The divLogoBlock does not appear when I copy and paste the entire page into Outlook as a signature. I believe there may be a problem with the CSS. Can someone please assist me? <html lang="en"><he ...

htmlcss

The switch statement remains unchanged for varying variables

Here is some code that I am working with: updateTable(selectedIndex) { console.log("running updateTable function"); let level = ''; // if (selectedIndex == 1){ // this.setState({level: 'day'}) // th ...

javascripthtmlreactjsswitch-statement

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss

The loading time of Javascript is dragging on

The loading sequence for the javascript in the "intro" div is currently causing a delay. The background image loads first, followed by the javascript, resulting in a slow overall load time. Is there a way to display a "loading please wait" message within t ...

javascripthtmlcss

JQuery function within the "onclick" event

$('.more').click(function showFriendInfo(id) { $('#MoreFriendInfo'+id).toggle(); }); I created this function called showFriendInfo(id), but how can I properly link it in HTML/PHP to obtain the id? I attempted the following ...

jqueryhtml