Discussion on: Daily Challenge #38 - Middle Name

View post

CSS

/* the first letter of each word will have a regular size */
.mn span::first-letter {
  font-size: 1rem;
} 

/* the words in the middle (not first or last) will have a font-size of 0 */
.mn span:not(:first-child):not(:last-child) {
  font-size: 0;
  display: inline-block;
}

/* add a . at the end of each shortened word */
.mn span:not(:first-child):not(:last-child)::after {
  content: ".";
  font-size: 1rem;
}

Wrap each word in a span, and add the class "mn" to the container.
Live demo on CodePen.

Alvaro Montoro • Aug 10 '19

If you select-and-copy the names, the full name is copied instead of the shortened one.

Alvaro Montoro • Aug 10 '19

I also did a JavaScript version on that same demo:

const middleName = name => name.split(' ')
                               .map((val, idx, arr) => idx == 0 || idx == arr.length - 1 
                                                        ? val 
                                                        : val[0] + ".")
                               .join(' ');