jquery - 使用 jquery 和 CSS 根据 UIWebview 中容器的高度截断文本

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>

这一切都工作正常，诀窍是，我有多个具有不同尺寸的 UIWebview，并且当 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();
}

Here's a demo它的运行情况(调整右下侧窗口的大小以查看其工作情况)。