Question

I am using a UIWebview to display a custom article of information I receive from a RSS feed, I’m using CSS to format and style the content. The article in the UIWebview contains a header, image and paragraph, The text of the paragraph wraps around the image on the left then flows underneath it.

<style type="text/css"media="screen">
    h1{
        font-size:20;
        font-family:Helvetica;
    }
    div#content{ 
        width: 400 px;
    }
    div#content img{
        float: right;
        display: inline;
        padding: 0 0 5px 20px;
    }
    p.para{
        font-family:Helvetica; 
        font-size:15px;
    }
</style> 
<div id="content">
    <h1>HEADER</h1>
    <img src="image URL"  style = "width:50; height = 50"></img>
    <p class="para">TEXT GOES HERE</p>
</div>

This all works fine, The trick is, I have multiple UIWebviews all with different sizes, and they all change their sizes when the iPad rotates.
Now, the text in the paragraph that wraps around the image needs to be truncated with an ellipsis when the text reaches the end (bottom) of the UIWebview. I have been searching for two days now on ways to do this and it seems Jquery is the way to go, I have found multiple plugins, Truncator.js,
eTruncate.js, jTruncate.js etc. Many of these plugins truncate to the width of the container, which wont work, some plugins use the fixed height of the container.
My problem is (I think) I would need the plugin to use the container height to work out the truncation point, and the container height needs to be determined by the height of the UIWebview.

I hope this makes sense, This is the first time I’m playing with CSS and jquery so I’m not sure which direction to go in. Is there a truncation plugin that would work best for this scenario and will it work with the CSS I am using at the moment?

Thank you
Brett

Answer 1

To determine the height of your container, which in turn is determined by UIWebview, you could add the following CSS and jQuery:

CSS

/* Causes #content to have the full height of the viewport.  This works
   because we've set #content's parents to have 100% height as well. */
html, body, #content {
    padding: 0;
    margin: 0;
    height: 100%;   
}

jQuery

/* Function that could be attached to $(window).resize().  Will give
   you the #content's current height. */
var getHeight = function() {
    var containerHeight = $('#content').height();
}

Here’s a demo of it in action (resize the bottom right side window to see it working).