Force breaking very long words in HTML when reaching the end of the line

📖 Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

There is an HTML <wbr> element that lets the browser know when to add a line break for very long words.

A very long word, such as microminiaturization, can be problematic when it comes to fitting a line of text in a narrow container.

That’s where the element comes in. We can tell the browser to break that word at a specific spot if it needs to. Actually, wbr comes from word-break-opportunity.

And yes, microminiaturization is a real word.

Check out this code:

<div>
  <p>Microminiaturization</p>
  <p>Micro<wbr>miniaturization</p>
</div>

It will result in this output:
wbr element in HTML

All the browsers support the wbr element, and here is the link for the codepen.

📖 Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X