CODEWITHSUNDEEP
javascripthtmlcss
matt
matt

Reputation: 44303

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

enter image description here

What would be the best way to split a word in the middle (or after a specific amount of characters or syllables) and join both "word-parts" with a line. Basically imagine a very long flexible underscore.

The goal is to have "word___part" always 100% of the parent container. Meaning it should work fully responsive when scaling down or up the browser-window.

    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>

How would you approach that? Flexbox?

Additionally the meta-goal would even be to set the word that is split apart with a dynamic-cms. Meaning the word "Automation" comes from a backend.

Upvotes: 6

Views: 825

Answers (5)

Kamga Simo Junior
Kamga Simo Junior

Reputation: 1741

The answers are good but you said Additionally the meta-goal would even be to set the word that is split apart with a dynamic-cms. Meaning the word "Automation" comes from a backend. So yiu can use the getword() method to get the word from backend and separate it into two using javascript

You can try to run the snippet and see the output. Then change the string returned by the getword() method and run again.

 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>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use :after pseudo-element on first span element and set align-items: flex-end; to align line at bottom of spans.

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>

You can also use js to split string at specific word and wrap each part in span elements.

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>

Upvotes: 3

Mohammad Usman
Mohammad Usman

Reputation: 39322

In case if background-color behind text element is a solid color:

  1. Create background-image with linear-gradient() on parent.
  2. Override background-color on child elements.

Working Demo:

.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>

Upvotes: 0

Paul Redmond
Paul Redmond

Reputation: 3296

A pretty simple way:

<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

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92903

Apply border-bottom to .underscore along with flex-grow: 1, then adjust height and margins to fit.

.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>

You can even use a dotted border instead of solid to simulate ellipses.

Upvotes: 2

Related Questions