There is a text paragraph within which several words are grouped into an inline-div with a background. To the beginning of this div an SVG-icon is attached: see the proto picture.

When the screen resolution is reduced, the icon should be transferred along with the next word.

Possible solutions and why they are not suitable:

1. Write the icon into an inline-div::before – no way, because the content of this SVG element is animated via @keyframes;
2. Do margin-left for the inline-div and move the icon using position:absolute – for Firefox works fine, but not for Chrome;
3. Remove all spaces between the SVG and the next word in the code – I have made one continuous HTML line without spaces and hyphens, the behavior has not changed;
4.   – after removing the spaces, no longer makes sense to try it, but I have inserted this symbol between the SVG and the inline-div, it didn`t work out as well;
5. Put the icon and the next word into a nested block with white-space:no-wrap – no, because the icon should be outside the inline-div`s background;
6. Do white-space:nowrap for the entire inline-div – obviously no, because this is made up of several words. It is inside plain text and should behave like plain text.

Upd: reproduced codepen https://codepen.io/Hawk1638/pen/XWBXPWV

* {
  font-size: 1.5rem;
}

.voice {
  display: inline;
}

.voice-content {
  display: inline;
  background: #8f8;
}


/* ANIMATION */

.eq-bar-wrapper .eq-bar {
  transform: scale(1, -1) translate(0, -25px);
}

.eq-bar-wrapper .eq-bar--1 {
  animation: .62s linear 0s short-eq infinite;
}

.eq-bar-wrapper .eq-bar--2 {
  animation: .55s linear .15s tall-eq infinite;
}

.eq-bar-wrapper .eq-bar--3 {
  animation: .45s linear .30s short-eq infinite;
}

@keyframes short-eq {
  0% {
    height: 8px
  }
  50% {
    height: 14px
  }
  100% {
    height: 8px
  }
}

@keyframes tall-eq {
  0% {
    height: 18px
  }
  50% {
    height: 10px
  }
  100% {
    height: 18px
  }
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  <div >
    <svg  xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 14 18">
        <rect  x="0" y="4" width="4" height="10"/>
        <rect  x="5" y="4" width="4" height="18"/>
        <rect  x="10" y="4" width="4" height="8"/>
    </svg>
    <div >irure dolor in reprehenderit</div>
  </div> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CodePudding user response：

You can wrap the first word together with the icon in a <span style="display: inline-block">. You have to combine that with a margin on the outer .voice class and absolute positioning of the <svg>. This works both in Firefox and Chrome.

.resize {
  font-size: 1.5rem;
  resize: horizontal;
  overflow: hidden;
}

.voice {
  display: inline;
  background: #8f8;
  margin-left: 1.25em;
  background: #8f8;
}

.first-word {
  display: inline-block;
  position: relative;
}

.eq-bar-wrapper {
  position: absolute;
  left: -1.25em;
  width: 1em;
  height: 1em;
}


/* ANIMATION */

.eq-bar-wrapper .eq-bar {
  transform: scale(1, -1) translate(0, -25px);
}

.eq-bar-wrapper .eq-bar--1 {
  animation: .62s linear 0s short-eq infinite;
}

.eq-bar-wrapper .eq-bar--2 {
  animation: .55s linear .15s tall-eq infinite;
}

.eq-bar-wrapper .eq-bar--3 {
  animation: .45s linear .30s short-eq infinite;
}

@keyframes short-eq {
  0% {
    height: 8px
  }
  50% {
    height: 14px
  }
  100% {
    height: 8px
  }
}

@keyframes tall-eq {
  0% {
    height: 18px
  }
  50% {
    height: 10px
  }
  100% {
    height: 18px
  }
}

<div>
  <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    <span ><span >
      <svg  xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 14 18">
          <rect  x="0" y="4" width="4" height="10"/>
          <rect  x="5" y="4" width="4" height="18"/>
          <rect  x="10" y="4" width="4" height="8"/>
      </svg>
    irure</span> dolor in reprehenderit</span>
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CodePudding user response：

Would this be a solution ?

.inline-div {
  display: flex;
}

.inline-div svg {
  flex-shrink: 1;
}