justify

CSS text justify with letter spacing

by

Here’s a script which can do it. It isn’t pretty, but maybe you can hack it to meet your needs. (Updated to handle resizing) function SplitText(node) { var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, “”); for (var i = 0; i < text.length; i++) { var letter = document.createElement(“span”); letter.style.display = “inline-block”; letter.style.position = “absolute”; letter.appendChild(document.createTextNode(text.charAt(i))); node.parentNode.insertBefore(letter, node); … Read more

Justify the last line of a div?

by

Here’s a cross-browser method that works in IE6+ It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements. CSS: p, h1{ text-align: justify; text-align-last: justify; } p:after, h1:after{ content: “”; display: inline-block; width: 100%; … Read more

How can I align text directly beneath an image?

by

Your HTML: <div class=”img-with-text”> <img src=”https://stackoverflow.com/questions/1225130/yourimage.jpg” alt=”sometext” /> <p>Some text</p> </div> If you know the width of your image, your CSS: .img-with-text { text-align: justify; width: [width of img]; } .img-with-text img { display: block; margin: 0 auto; } Otherwise your text below the image will free-flow. To prevent this, just set a width to … Read more

“text-align: justify;” inline-block elements properly?

by

Updated the “Future” solution info below; still not yet fully supported. Present Workaround (IE8+, FF, Chrome Tested) See this fiddle. Relevant CSS .prevNext { text-align: justify; } .prevNext a { display: inline-block; position: relative; top: 1.2em; /* your line-height */ } .prevNext:before{ content: ”; display: block; width: 100%; margin-bottom: -1.2em; /* your line-height */ } … Read more

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

by

The modern way to distribute items evenly is to set the following two declarations on the container element: .container { display: flex; /* (1) */ justify-content: space-between; /* (2) or space-around or space-evenly */ } The value to use for justify-content depends on which kind of even distribution is needed. See MDN ul { list-style: … Read more

tech