0

So I have this newly made, non-English blog, made with Wordpress and Elementor.

I posted my first article and it looks like a mess.

My problems lays in the fact that words will split at the end of the line and that Headings do not start with an uppercase letter. Overall formatting looks pretty bad. From my research, I understand the theme is doing this. I tried to tweak it myself but my coding skills are super limited.

Here's the link: https://dreptulescu.ro/postura-corecta-de-ce-este-important-sa-tinem-spatele-drept/

On mobile it looks the worse but desktop ain't very nice either.

Can anyone please help me with some custom CSS? If there is another way, great, but I doubt it.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Stefan Brulea
  • 1

1 Answers1

0

For headings, try this. (note that this will capitalize the first letter of every word, not just the first word).

h2 {
  text-transform: capitalize;
}

For normal text. (your text really should be in a p tag or at least a separate div with its own class).

.text {
  overflow-wrap: normal;
}

If you really want to just capitalize the first letter of headings, you'll need some js. This won't work if your headings have any children, but otherwise it should be fine.

const elements = document.querySelectorAll('h2');
elements.forEach((el, index) => {
  const words = el.textContent.split(" ");
  const firstWordAsArr = words[0].split('')
  firstWordAsArr[0] = firstWordAsArr[0].toUpperCase();
  words[0] = firstWordAsArr.join('');
  elements[index].textContent = letters.join("")
 } 
)
David Frederick
  • 182
  • 1
  • 7
  • Just found this. Alternatively, you can leave out the js and use pure css and psuedo-class :first-letter. Link: https://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css – David Frederick Dec 18 '20 at 20:26
  • you dont need JS, you can also use pseudo selcetors as `first-letter` or `first-child`, `nth-child`... – tacoshy Dec 18 '20 at 22:28