1

I have a standard responsive title (that breaks into multiline):

<h1>This is my beautiful 
    title!</h1>

I also have a (multiline) ellipsis defined on it (this is webkit specific I know but also ok because I need it only for iOS/Android) so something like:

h1 {
    font-size: 18px;
    line-height: 1.8em;
    height: 3.6em;

    position: relative; 
    display: block; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;           
    overflow: hidden;   
}

What I would like to do is have the first line of my (multiline) title have different width - to achieve a more visually balanced title. But I cannot add new markup and the titles are of course dynamic/different all the time. Am looking for a CSS only solution (no JS).

Simple problem - how you you make line 1 in multiline text narrower but keep ellipsis at the same time.

So that the title would then look something like:

<h1>This is my 
    beautiful title!</h1>

SOLUTION 1 - I found a way to do this by using a right-floated pseudo element on the first line of the text - so something like:

h1:before { 
    content: "";
    float: right;
    width: 30%;
    height: 1em;
}

PROBLEM 1 - floated elements do not work in a flexbox container and -webkit-box is still a flexbox container. And I need it to make ellipsis work. Any ideas on how to "float" a box to the right and wrap text around it without actually using a float?

SOLUTION 2 - I found a clever way to do this by changing the text layout direction and text-indent - so something like:

h1 {    
    direction: rtl;
    text-indent: 30%;
    text-align: left;
}

PROBLEM 2 - seems nice and clean - as long as you don't have trailing apostrophes, colons and stuff like that - because RTL will change their position to the beginning of the sentence (and I can't add additional markup or characters within H1 - only possibly outside).. so with this applied my title now looks like

<h1>!This is my 
    beautiful title</h1>

Any ideas on more hacks that could correct problem 1 or 2? It feels like I'm so close but at the same time so far away.

EDIT: problem examples here - https://codepen.io/anon/pen/bYqZQP

Michael
  • 1,742
  • 3
  • 18
  • 24
  • can you provide a demo? shall we check it only in a mobile (iOS/Android) or shall also work in windows? – S.Serpooshan Nov 11 '17 at 05:45
  • sure - here you go - https://codepen.io/anon/pen/bYqZQP ... 3rd box should be a combination of 1st and 2nd... the problem is pretty straightforward - how do you have 1st line of a multiline text narrower than the rest while at the same time maintaining ellipsis cutoff (trailing ...)... I just need it for webkit/chrome - but -webkit-line-clam works only there anyway... – Michael Nov 11 '17 at 12:33
  • I misunderstood the question a little, so I deleted my answer. I also tried a few variants, though I am pretty sure this won't be possible w/o script or a markup change. This post might help you move forward: https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text – Asons Nov 11 '17 at 13:31

0 Answers0