{"id":649,"date":"2014-08-19T16:07:54","date_gmt":"2014-08-19T16:07:54","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=649"},"modified":"2015-08-17T10:58:14","modified_gmt":"2015-08-17T10:58:14","slug":"add-three-dots-in-a-multiline-span","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/add-three-dots-in-a-multiline-span\/","title":{"rendered":"How to add three dots in a multiline span"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

So, my question<\/a>\u00a0was that I actually found the solution to this in another StackOverflow question<\/a>, and that the solution is pretty simple. The link to the jsFiddle for the example is here<\/a>, and also copied here\u00a0for reference.\u00a0HTML code:<\/span><\/p>\n

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look<\/span>\u200b<\/pre>\n
CSS\u00a0code:<\/p>\n
span{\r\n    display:inline-block;\r\n    width:180px;\r\n    white-space: nowrap;\r\n    overflow:hidden !important;\r\n    text-overflow: ellipsis;\r\n}<\/pre>\n
And it works like expected<\/strong>, it prints: Lorem Ipsum is simply du…<\/strong><\/p>\n
However, when I tried this in another example. JsFiddle is here<\/a>. HTML code:<\/p>\n
<div class=\"textContainer\">                \r\n    <img src=\"#\" class=\"image\" alt=\"the_image\">\r\n    <span class=\"text\">\"The quick brown fox jumps over the lazy dog\" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.<\/span>\r\n<\/div><\/pre>\n
CSS code:<\/p>\n
.textContainer{\r\n    width: 430px;\r\n    float: left;\r\n    margin-top: 10px;\r\n    border: 1px solid black;                \r\n}\r\n\r\n.text {\r\n    font-size: 24px;\r\n    line-height: 24px;\r\n    font-weight: bold;\r\n    color: #047F04;\r\n    display: block;\r\n    white-space: normal;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis;\r\n    height: 99px;\r\n}\r\n\r\n.image {\r\n    float: right;\r\n    position: absolute;\r\n    top: 85px;\r\n    right: 10px;\r\n    width: 108px;\r\n    height: 42px;\r\n}<\/pre>\n
So my question was\u00a0how could I achieve to put …<\/strong> on the end of the string in my example?<\/p>\n
The answer, by user devundef, was:<\/p>\n
\n
The specification for the\u00a0text-overflow<\/code>\u00a0property says that this is not possible for multiline text:<\/p>\n
This property specifies rendering when\u00a0inline content<\/strong>\u00a0overflows its block container element (“the block”) in its inline progression direction that has \u2018overflow\u2019 other than \u2018visible\u2019. Text can overflow for example when\u00a0it is prevented from wrapping<\/strong>\u00a0(e.g. due to \u2018white-space:nowrap\u2019 or a single word is too long to fit).<\/p><\/blockquote>\n
In other words, only works on single line text blocks.<\/p>\n
source:\u00a0http:\/\/dev.w3.org\/csswg\/css3-ui\/#text-overflow<\/a><\/p>\n
EDIT<\/strong>\u00a0This fiddle has a workaround using jquery:\u00a0http:\/\/jsfiddle.net\/k5VET\/<\/a>\u00a0(source:\u00a0Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?<\/a>)<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=649"}],"version-history":[{"count":6,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/649\/revisions"}],"predecessor-version":[{"id":1716,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/649\/revisions\/1716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}