The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

Tags: javascript,html,css,responsive-design

Problem :

I have a technical question. I'm a front-end developer and always get requests about changing

"awkward line breaks"


"too much white space"

or other stuff related to how text of varying lengths wraps onto lines. I'm wondering what CSS and JavaScript I need to prevent text awkwardness. The persons who manage the content want to be able to type any content into the content management system and have it come out non-awkward at every screen size.

Is there a CSS property like

text-awardness: non-awkward


line-break: always-look-perfect

If not, is there a JavaScript library named something like awkfixer.js whereby I can apply a class like

<p class="fix-awkardness">Thiiiiiiiiiiiiiisssssssssss word is long and so it might cause a visible space if we're not applying word-break</p>


Solution :

It depends what you mean by awkwardness, but hyphenation and line-breaks might help here.

CSS3 supports a property called hyphens.

hyphens: auto;

handling awkward line breaks is a little trickier than a one line fix, but some combination of pseudo elements and margins in your css might do the trick for you.

    CSS Howto..

    How come half the triangle is missing

    How to brighten Textbox when it is focused?

    How to make resizable li elements with CSS only

    css how to force a layer to be in the back (z-index doesn't work)

    How do I make the .left class appear below the header but keep the header position as fixed?

    How can I give an image a black opaque overlay?

    How to hide a column in the Webgrid in MVC?

    How are less files compiled into css templates in PHP Thelia?

    How to add the img-responsive class in javascript

    ASP.NET DataBoundField DataFormatString, how can I add html correctly?

    How to make diagonal titles on html tables

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How to separate image folder and css folder to work with eachother in maven project

    How to notify view from model to change a value in backbone

    how to give animation effect on hover using css or jquery on border of division

    How to find the css class of an anchor link inside a cross domain iFrame?

    Bootstrap - how to make the image being scaled down to fit the window height?

    Show Limited Data Using jquery

    How to add more items to the list without going to the next row? [closed]

    how to hide an image on css active in IE

    how to replace a link name text

    Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

    how to remove the css overflow:hidden of jquery dialog

    How to change the style of an active menu with php + css

    How can I fix this parralax

    How to get the element position after css-translation

    Primefaces p:growl css. How to extend div message background color width

    jQuery - How to animate text simultaneously to color change transition

    How do I set dynamic width to a block element?

    CSS Button Animation - How to Accomplish?