2

In the following example is there a bootstrap way of truncating (with ellipsis in the end) multiline text of unknown length in div with id text2 so that the height of its parent column with id column2 matches the height of column1? My workaround was to give position-absolute class to the div of text2 and applying overflow:hidden to column2 but this of course cuts the text rather than truncates it.

Another approach is to add an absolutely positioned element at the end of column2 and apply gradient background to make the text 'fade' away in the end but it is not applicable in my case since the color of background of the <body> tag changes randomly as well.

The trick with -webkit-line-clamp requires setting static height for the clamping to occur and to make it cross-browser compatible and since I cannot predict the length of the text - I cannot know the height. Plus it wouldn't matter since my responsive design changes font-size on every @media query of Bootstrap's width threshold.

https://www.codeply.com/go/PNsIY4PWdG

<div class="container">
    <div class="row">
        <div id="column1" class="col-6">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/600x350" class="img-fluid"></a>
        </div>
        <div id="column2" class="col-6">
            <div id="text1">
                <h5>text 1 (of unknown length) Lorem ipsum dolor sit amet , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </h5>
            </div>
            <div id="text2">
                <p>text 2 (also of unknown length) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
        </div>
    </div>
</div>
astralmaster
  • 2,344
  • 11
  • 50
  • 84
  • I don't think there's a "bootstrap way" for achieving this. Would have to be custom css. – WebDevBooster Feb 19 '18 at 12:45
  • I have searched SO for days to find a solution for this case and came up with nothing except JS which I do not consider as a viable solution. I do not mind using a custom way either – astralmaster Feb 19 '18 at 12:46
  • Did you see this answer? https://stackoverflow.com/a/33061059/171456 Looks like JS is the only way w/o knowing the minimum visible lines. – Carol Skelly Feb 19 '18 at 12:58
  • Yes, in fact I tested dotdotdot library multiple times in different projects and it works fine if the text to truncate is not visible at first when you load the page (or if you have to scroll down to see it), but if the text is located at the top of your page, when user navigates to that page he/she can see the long line of text till documentReady event fires to initialize the dotdotdot library. – astralmaster Feb 19 '18 at 13:07
  • This is a rather historical problem in CSS and all the workarounds including adding pseudo elements to 'cover' the overflow text work for most scenarios it's just that in my case the backgorund color of the page is random. I just hoped that Bootstrap could have a trick for this. – astralmaster Feb 19 '18 at 13:10

0 Answers0