1

I am trying to build a fluid content width with text ellipsis.. I found this question: Fluid width with text-overflow ellipsis

My requirements are almost the same, but :

  1. .container has fixed known width 320px
  2. .extra-text (.badge inside the previous question) could be any width but should not be more then 60px
  3. .content and .extra-text must be wrap as a paragraph, and cannot be more then 2 lines with a max-height of 44px; .extra-text will be at the end of second line if .content has a lot of text
  4. .content could be one word or long text and will have ellipsis to be contained inside .container if it is a long text

Browser supports : IE9

.container {    
    width: 320px;
    max-height: 44px;    
    position: relative; 
    background: #e2e2e2;
    text-align: center;
}

/** Demo */
.container + .container {
    margin-top: 1rem;
}
<div class="container">
    <span class="content">TITLE</span>
    <span class="extra-content">extra-text</span>
</div>
<div class="container">
    <span class="content">ANOTHER LONGER LONG LONG LONG LONG LONG LONG LONG LONG TITLE</span>
    <span class="extra-content">extra-text</span>
</div>

So in second block the latest words "LONG TITLE" should be ellipsis and extra-text should be there..

EDIT for precision :

Here a "spec" of what I need : 

+-------------------+
|lorem ipsum example|
|lorem ipsum example|
|lorem ... extra-txt|/* Content is long, "..." is need to display extra-txt */
+-------------------+

+-------------------+
|lorem extra-txt    |/* Here content is short so I don't need ellipsis. */
+-------------------+
Community
  • 1
  • 1
Mariepw
  • 51
  • 7
  • possible duplicate: http://stackoverflow.com/q/33058004/3597276 – Michael Benjamin Jan 24 '17 at 17:02
  • @Michael_B not exactly, because it doesn't fix the problem I have with extra-content – Mariepw Jan 24 '17 at 17:17
  • Based on your item (3), it appears your asking for ellipsis on multiline text. Correct? – Michael Benjamin Jan 24 '17 at 17:23
  • Yes I need to appliy ellipsis on probably multiline text, but I need an extra-text to be displayed at the end of the lines, as inline element, just after the ellipsis and inside the same parent container – Mariepw Jan 24 '17 at 17:27
  • Well, with standard CSS ellipsis, using the `text-overflow` property, `white-space: nowrap` is a requirement. Therefore, ellipsis can only work on a single line of text. That's the reason I referred you to the other post. It has workaround options for ellipsis on multiline text. – Michael Benjamin Jan 24 '17 at 17:30
  • Yes the workaround options work for ellipsis on multiline text, but I still cannot figure how to make the text stop before the end of the last line as the `extra-text` can finish it – Mariepw Jan 25 '17 at 07:54
  • @Michael_B see my edit for more precision – Mariepw Jan 25 '17 at 09:45

0 Answers0