Geek Answers Handbook

CSS / JS: split words with a horizontal line in responsive design

enter image description here

What would be the best way to break a word in the middle (or after a certain number of characters or syllables) and connect the two words “parts” with a line. Basically, imagine a very long flexible underscore.

The goal is that "word___part" always be 100% of the parent container. This means that when you scale or enlarge the browser window, it should fully respond.

    span:first-child {
    	float:left;
    	display:inline-block;
    }
    
    span.underscore {
    
    }
    
    span:last-child {
    	float:right;
    	display:inline-block;
    }
    <span>Auto</span><span class="underscore"></span><span>mation</span>
Run codeHide result

How would you approach this? Flexbox

In addition, the meta goal would be to set the word divided by dynamic cms. The meaning of the word "Automation" comes from the backend.

+6
5

- :after span align-items: flex-end; .

div {
  width: 70%;
  display: flex;
}
span:first-child {
  display: flex;
  align-items: flex-end;
  flex: 1;
}
span:first-child:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
}
<div>
  <span>Auto</span><span>mation</span>
</div>

<div>
  <span>Lorem ipsum dolor </span><span>sit.</span>
</div>
Hide result

js span.

function modify(selector, word) {
  var el = document.querySelector(selector);
  var text = el.textContent;
  var i = text.indexOf(word)

  if (i != -1) {
    var arr = [text.substring(0, i), text.substring(i)]
    el.innerHTML = arr.map(e => '<span>' + e + '</span>').join('');
  }
}

modify('.e1', 'mation')
modify('.e2', 'sit')
div {
  width: 70%;
  display: flex;
}
span:first-child {
  display: flex;
  align-items: flex-end;
  flex: 1;
}
span:first-child:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
}
<div class="e1">Automation</div>
<div class="e2">Lorem ipsum dolor sit.</div>
Hide result
+3

border-bottom .underscore flex-grow: 1, .

.wrapper {
  display: flex;
}

span.underscore {
  border-bottom: 2px solid black;
  flex-grow: 1;
  height: 0.5em;
  margin: 0 5px;
}
<div class="wrapper">
  <span>Auto</span><span class="underscore"></span><span>mation</span>
</div>
Hide result

dotted solid .

+2

:

<div>
  <span class="left">Auto</span>
  <span class="underscore"></span>
  <span class="right">mation</span>
</div>

div {
  display: flex;
}

.underscore {
  width: 100%;
  border-bottom: 1px solid #000;
  margin: 0 5px;
}

https://codepen.io/anon/pen/XaddqO

0

, background-color :

  • background-image linear-gradient() .
  • background-color .

:

.text {
  background: linear-gradient(to top, transparent 5px, black 5px,
                                      black 7px, transparent 7px);
  justify-content: space-between;
  display: flex;
}

.text span {
  background: #fff;
  padding: 0 5px;
}
<div class="text">
  <span>Auto</span>
  <span>mation</span>
</div>
Hide result
0

, , - , , cms. "" . , yiu getword(), javascript

. , getword(), .

 var container = document.getElementById('slit-container');
 var word = getWord();
 var wordPartOne = word.substring(0, 4);
 var wordPartTwo = word.substring(4, word.lenght);
 var data = "<span>"+wordPartOne+"</span> <span>"+wordPartTwo+"</span>";
 container.innerHTML = data;

 function getWord(){
   //Query your backend to get the word
   //for test purpose I will just return a string

   return "Automation"
 }
div {
  width: 70%;
  display: flex;
}
span:first-child {
  display: flex;
  align-items: flex-end;
  flex: 1;
}
span:first-child:after {
  content: '';
  height: 1px;
  background: black;
  flex: 1;
}
<div id="slit-container">

</div>
Hide result
0

More articles:


All Articles