How to Wrap Text, Links Using CSS in WordPress

Often we need to add custom widgets, div, and tables to our WordPress sites. It is a common issue to find the text or hyperlink is “overflowing” from a desired, defined area degrading the design and pushing towards a “home-made” feel. Correcting these kinds of minute problems makes the total website look professional.

In CSS, if we have an unbreakable string such as an URL or an unusually long word, by default it will overflow whenever the div is too small for it. Look at the sidebar of this website on the right hand side. You’ll find a widget named “About this article” which starts with the text “Cite this article as Abhishek Ghosh…”. There is an URL to the article.

Normally, the link will display as an overflow since showing it in some other way else could cause the vanishing of a part. In this case, overflow is visible, and we can see the overflowing text. If overflow was set to hide, the link would get partially chopped off.

I can provide you with can example situation:

Below is its application:

The overflow-wrap property can help in this case. The overflow-wrap property is the same as the property word-wrap (non-standard). word-break is an alternate. This word-break property will break the word at the point it overflows.

The topic is big. All we want is to give you a quick but robust solution.

This is the application:

I hope this solution works for your need.