![]() ![]() ![]() When searching the web you probably will find the following solution. ![]() I tested all the examples above and combinations of them in IE7, IE8, IE9, IE10, IE11, Edge, Firefox 39 (Windows, Linux, Mac), Chrome 44 (Windows, Linux, Mac), Opera 30 (Windows, Mac), Safari 8 (Mac), Safari 5.1 (Windows), Android 5 (Nexus 6), Android 4.4 (Nexus 5), Android 2.3 (Galaxy S2), iOS 8.3 (iPhone 6), iOS 7 (iPhone 5S), iOS 6 (iPhone5), Opera Mini (Android 5), Opera Classic (Android 5), Opera Mobile (Android 5) and Windows Phone 8.1 (Lumia 930) using real devices and BrowserStack – Here is a list of all 26 browsers and their results. If you really need it do it on the server side and only truncate after full words. Please, don’t use text-overflow: ellipsis at all – truncating is not a job for CSS. Furthermore, words could be truncated in a way that the original word will get another meaning – which may be funny at best or offensive at worst. First of all it will truncate every text after one line even if you use short words which would fit perfectly and would break in more lines. While this technique sounds like a good fit at a first glance it comes with disadvantages. Ellipsis #Īnother option to handle long words is truncating.īrowser support: Text-overflow is supported in every major browser. 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. Prubalo La propiedad text-overflow no fuerza a que ocurra un desbordamiento. Puede ser cortado, mostrar una elipsis (' ', U+2026 Horizontal Ellipsis ), o mostrar una cadena de texto personalizada. The web consists of content, content consists of words and words can be long, very long. La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacrsele notar a los usuarios. ![]()
0 Comments
Leave a Reply. |