Databases
StackOverflow2013
Postsdbo
POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
    primarykey
    data
    text
    <p>Given that you have an HTML div/section with a header, multiple paragraph tags (or anything block-level HTML tags markdown will produce, really -- h1-6, ul, ol, p, etc.), and perhaps a footer or some other content, how do you make the "content" fit nicely in that box?</p> <p>Here is a screenshot of the issue:</p> <p><img src="https://i.imgur.com/BanVS.png" alt="CSS Text Overflow"></p> <p>The HTML structure is something like:</p> <pre><code>&lt;section class='box'&gt; &lt;header&gt; &lt;h2 class='title'&gt;A Title&lt;/h2&gt; &lt;/header&gt; &lt;footer&gt;[the image]&lt;/footer&gt; &lt;div class='content'&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;&lt;/p&gt; ... &lt;p&gt;&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; </code></pre> <p>I've tried setting <code>text-overflow: ellipsis</code> on the section, div, and p tags, but that doesn't work. Is this possible?</p> <p>Really just looking to see what is and is not possible here:</p> <p><strong>Possible</strong></p> <ul> <li>You can definitely use jQuery to iterate through the content in the box, find the block element that's chopped off (top &lt; box botton and bottom > box bottom) and truncate the text. But, this is a last resort as it quickly becomes a performance problem with lots of boxes and all the different edge cases.</li> <li>You can create a "summary" blob of text on the server side that fits within the boxes dimensions. But this doesn't work if you change the font-size or the size of the box.</li> <li>You can create a set of <code>font-size</code> and <code>line-height</code> rules that forces the text to at least be cropped in-between lines, but this is very brittle.</li> <li>Like @Madmartigan in the comments, you can also add a gradient at the bottom of the box to fade out the text.</li> </ul> <p><strong>Not Possible</strong></p> <ul> <li>You can't set <code>text-overflow: ellipsis</code> in this case (at least from the things I've tried).</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLance Pollard
    1. USLance Pollard
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy are you cutting off the text in the first place? I'm assuming you have a hardcoded height value set here? Are you providing a "More" link, and if so: does that link reveal the text or load a separate page?
      singulars
      1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
      1. USWesley Murch
    2. COPossible duplicate? http://stackoverflow.com/questions/8397070/jquery-height-based-truncate-solution
      singulars
      1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
      1. USU-DON
    3. COyeah, you can read the whole thing by clicking on it, but there is no [more] link. But one thing we don't want to do is create something like a "summary" blob of text (the server generates some string that's x number of characters for example). So, assume for now that the whole article is loaded and just chopped off to fit into the box. There's potentially 1000's of sizes of boxes so precomputing shortened `… [Read More]` strings server-side isn't viable.
      singulars
      1. POHow do you crop multiple HTML paragraph tags to fit into an explicitly sized box with CSS3 or JavaScript (text-overflow, truncate, etc.)?
      1. USLance Pollard
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload