![]() Note: Some browsers require the legacy name “word-wrap” (rather than “overflow-wrap”) to work. The next solution is using word-wrap (overflow-wrap), another property to specify whether or not the browser may break lines within words.īrowser support: CSS overflow-wrap is supported in every (at least all I tested and listed on Can I use) browser. I also found some bugs when using word-break in combination with hyphens – more on that later. word-break #Īs browser support for hyphens isn’t really good, let’s try word-break – a CSS property to specify whether to break lines within words.īrowser support: CSS word-break is supported in every browser, except from Opera Mini and old presto-based Opera browsers. The downside is that you have to load a lot of extra JavaScript and especially for longer text it will hurt the performance. You could also use a JavaScript library like Hyphenator.js which works with many languages and in lots of browsers. ![]() You have to define the lang attribute on the parent element and you should be aware that non-english languages are not supported very well across browsers. I also tested Safari 5.1 for Windows where hyphens are added but in my test words they were all on the wrong position and made no sense.įurthermore, hyphens is language-sensitive. The first solution for long words is using hyphens.īrowser support: CSS Hyphenation is supported in every major browser, except from all blink-based browsers (Chrome, Opera, Android) – Chromium bug. ![]() Everyone involved with the web will sooner or later have to deal with long words.īrowsing the web on my mobile device daily I see all kind of “failures” with long words – broken layouts, cropped words and situations like the one in the image above. Please do not email us with problems regarding this tutorial, only comments will be responded to.The web consists of content, content consists of words and words can be long, very long. If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Text-overflow set to ‘ellipsis’ will display the ellipsis at the end of your truncated text string.White-space set to ‘nowrap’ and overflow set to ‘hidden’ ensures that your text remains on one line.Max-width can be adjusted to any width necessary or removed if the element is already inside of another responsive element.Make sure that you are referencing the same CSS class placed on your HTML element.In the final step we will use CSS to make our span tag responsive while at the same time truncating the text with ellipsis at the end of it. Step 2: Use CSS to Truncate your Text Responsively while also adding Ellipsis at the End Take note of the CSS class ‘truncate’ added to the HTML element, it will be referenced in the next and final step.< span class="truncate"> Lorem ipsum dolor sit amet, choro insolens conceptam vim cu< /span> Please note that you can use any HTML element you want for this method. ![]() For purposes of this tutorial we will be using a span tag. In Step 1, we will be creating an HTML element to place the text we want to truncate inside of. Step 1: Create an HTML Element for your Truncated Text In this tutorial we will teach you how to easily truncate text strings responsively while adding ellipsis at the end via CSS. While it may seem quite complex, it’s actually very simple to achieve by utilizing only CSS. If you wondered if they were using JavaScript or some other complex method to achieve this, the answer is no. You may have seen major websites with truncated text in the sidebar in order to keep things tight and neatly organized.
0 Comments
Leave a Reply. |