tmp

by Artem

HTML

<div class="wrp">
  <span class="label"></span>
  <span class="headline headline-one">One</span>
  <span class="headline headline-two">Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</span>
</div>

<div class="wrp">
  <span class="label"></span>
  <span class="headline headline-one">One One One One One One One Ok One One One One One One One Ok One One One</span>
  <span class="headline headline-two">Two Two</span>
</div>

<div class="wrp">
  <span class="label"></span>
  <span class="headline headline-one">One One One One One One One O One One One One One One One Ok One One One</span>
  <span class="headline headline-two">Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</span>
</div>

<div class="wrp">
  <span class="label"></span>
  <span class="headline headline-one">One One One One One One One Ok</span>
  <span class="headline headline-two">Two Two Two Two Two Two Two Two Two Two</span>
</div>

<div class="wrp">
  <span class="label"></span>
  <span class="headline headline-one">One</span>
  <span class="headline headline-two">Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</span>
</div>

<div class="wrp">
  <span class="label"></span>
  <span class="headline headline-one">One</span>
  <span class="headline headline-two">Two Two Two Two Two</span>
</div>

CSS

body {
  margin: 0;
  padding: 20px 0;
  line-height: 1.6em;
  font-size: 16px;
  color: #333;
  font-family: Helvetica, sans-serif;
}

.wrp {
  margin: 0 auto;
  width: 350px;
  border: 2px dashed #222;
  padding: 15px 20px;
  margin-bottom: 10px;
}

.wrp::after {
  content: '';
  display: table;
  clear: both;
}

.headline {
  display: inline-block;
}

.headline-one {
  font-size: 18px;
  font-weight: bold;
}

.label {
  float: right;
  shape-outside: inset(1% round 50%);
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 50%;
  background-image: linear-gradient(to top, #81a8cb, #cde6f9);
}

.label > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

'use strict';

const SVG_SIZE = 40;

function normalizeDisplay(iconSize) {
  const headlines = Array.from(document.getElementsByClassName('headline'));
  headlines.forEach(headline => {
    const parent = headline.closest('.wrp');
    if (parent) {
      setDisplay(parent, headline, iconSize);
    }
  });
}

function setDisplay(parent, element, iconSize) {
  var computedStyle = getComputedStyle(parent);
  var parentWidth = parent.clientWidth;

  parentWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

  if (element.offsetWidth + iconSize >= parentWidth) {
    element.style.display = 'block';
  }
}

document.onreadystatechange = function() {
  if (document.readyState === 'interactive') {
    console.log('ok');
    normalizeDisplay(SVG_SIZE);
    window.onresize = normalizeDisplay;
  }
};

// temp
normalizeDisplay(SVG_SIZE);
window.onresize = normalizeDisplay;