flexible title- updated

by Himanshu Joshi

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Roboto:400,700"></script>
<div class="parent row">
  <div class="title" data-weightage="20">
    <h1 id="uniq_title1"></h1>
  </div>
</div>

<div class="parent row">
  <div class="title" data-weightage="30">
    <h1 id="uniq_title2"></h1>
  </div>
</div>
<div class="parent row">
  <div class="title" data-weightage="40">
    <h1 id="uniq_title3"></h1>
  </div>
</div>
<div class="parent row">
  <div class="title" data-weightage="40">
    <h1 id="uniq_title4"></h1>
  </div>
</div>

SCSS

.parent {
  background-color: red;
  height: 230px;
  margin-top: 40px;
  .title {
    width: max-content;
    width: -moz-max-content;
    position: relative;
    left: 90px;
    background-color: white;
    height: 100%;
    padding: 40px 40px 0 16px;
    h1{
      font-size: 48px;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.13;
      letter-spacing: normal;
    }
  }
}

JavaScript

var long_string1 = "Hype Cycle for Digital Marketing lorem atmi";

var long_string2 = "Empower your organization for a successful shift to agi lorem atm ipsum dolor ame";

var long_string3 = "Empower your organization for an successful shift to agile lorem ats ipsut dolor amet consectetur anjo.";

var long_string4="Empower your organization for an <br> successful shift to agile lorem ats <br>ipsut dolor amet consecteti anjoni";

document.getElementById('uniq_title1').innerHTML = charlen(long_string1);
document.getElementById('uniq_title2').innerHTML = charlen(long_string2);
document.getElementById('uniq_title3').innerHTML = charlen(long_string3);
document.getElementById('uniq_title4').innerHTML =
long_string4;

function charlen(long_string) {
  if (long_string.length > 0 && long_string.length < 45) {
    var weightage = 20;
    return str_update2(long_string, weightage);
  }
  if (long_string.length > 45 && long_string.length < 90) {
    var weightage = 30;
    return str_update2(long_string, weightage);
  }
  if (long_string.length > 90) {
    var weightage = 35;
    return str_update2(long_string, weightage);
  }
}

function str_update2(long_string, weightage) {

  var myRegexp = / /g,
    result,
    arr = [];

  while (result = myRegexp.exec(long_string)) {
    arr.push(myRegexp.lastIndex);
  }

  var arr1 = [],
    idx = 0;

  while (arr.findIndex((val) => {
      return val > weightage
    }) !== -1) {
    arr1.push(arr.findIndex((val) => {
      return val > weightage
    }));
    weightage *= 2;
  }
  var val;;
  for (var i = 0; i < arr1.length; i++) {
    i === 0 ? val = 0 : val = 4;
    long_string = [long_string.substring(0, (arr[arr1[i]] + val)), "<br>", long_string.substring(arr[arr1[i]])].join("");
  }
  console.log(long_string);
  return long_string;
}