Обрезать текст в соответствии с высотой контейнера в UIWebview с использованием jquery и CSS

Question

Я использую UIWebview для отображения пользовательской статьи информации, которую я получаю из RSS-канала, я использую CSS для форматирования и оформления содержимого.Статья в UIWebview содержит заголовок, изображение и абзац. Текст абзаца оборачивается вокруг изображения слева, затем течет под ним.

<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>

Это все работает нормально, уловка в том, что у меня естьнесколько UIWebviews все с разными размерами, и все они меняют свои размеры, когда iPad вращается.Теперь текст в абзаце, который оборачивается вокруг изображения, должен быть обрезан многоточием, когда текст достигает конца (внизу) UIWebview.Я два дня искал способы сделать это, и, кажется, Jquery - это путь, я нашел несколько плагинов, Truncator.js, eTruncate.js, jTruncate.js и т. Д. Многие из этих плагинов усекаются до шириныконтейнера, который не работает, некоторые плагины используют фиксированную высоту контейнера.Моя проблема (я думаю), мне нужен плагин, чтобы использовать высоту контейнера для определения точки усечения, а высота контейнера должна определяться высотой UIWebview.

Надеюсь, это имеет смысл, Это первый раз, когда я играю с CSS и jquery, поэтому я не уверен, в каком направлении идти. Есть ли плагин усечения, который лучше всего подойдет для этого сценария, и будет ли он работать с CSS, который я использую намомент?

Спасибо, Бретт

Answer 1

Чтобы определить высоту вашего контейнера, которая в свою очередь определяется UIWebview, вы можете добавить следующие CSS и 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();
}

Вот демонстрация этого в действии (измените размеры нижнего правого бокового окна, чтобы увидеть, как оно работает).