确定 div 布局尺寸 php

Question

我有三个 div 正在填充来自数据库的动态文本。 div #container 是一个固定的高度和宽度，其中的文本在其中换行。这三个 div 是不同的字体大小。三个 div 中的任何一个都可能有足够的文本超过容器的大小。我需要确定文本是否超过容器大小以及它出现在哪个 div 中的哪个字母。然后，无关的文本将被包裹在类似<span class=hide">text here</span>

<div id="container">
    <div id="first"><?php echo $arr['first'] ?></div>
    <div id="mid"><?php echo $arr['mid'] ?></div>
    <div id="last"><?php echo $arr['last'] ?></div>
</div>

我认为这在 PHP 中是不可能的，因为样式是在客户端完成的。也许有办法伪造它？尽管这可能会很快变得丑陋。

我非常努力地不在 javascript 中执行此操作，因为此计算将在每个查看的页面中进行大约 10 次。请不要告诉我用 PHP 做不到，总有办法的。

有什么想法吗？

Answer 1

以防万一您认为客户端对您更有意义，我整理了一个小提琴。我意识到你想避免客户端，但你提到这会发生十次，老实说，这些天在浏览器中增加了多少 js 速度，这真的很少。它也是一个更简单的问题客户端。

http://jsfiddle.net/JSRtk/

基本上你检测容器是否溢出。如果是这样，您将显示“阅读更多”按钮。单击时，它将展开容器以显示所有文本并消失。

$('#container > div').each( function() {
    if (checkOverflow(this)) {
        console.log('overflow detected in ' + $(this).attr('id'));
        $(this).after('<p>Read more...</p>');
    }        
});

$('p').live('click', function() {
    $(this).prev('div').css('height', 'auto');
    $(this).hide();
});

function checkOverflow(el)
{
   var curOverflow = el.style.overflow;
   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Answer 2

您是否必须出于某种目的（即爬虫/搜索引擎优化）将其包装在跨度中？如果不是，您可以在具有固定宽度的 div 上设置 CSS 以隐藏溢出，或者，您可以计算出大致适合该宽度的字符数（计算它们）然后使用 strlen() 和 substr() 像这样

<?php
$string = "This is a string thats too long to fit";
if(strlen($string) > 20)
    echo substr($string,0,20);
else
    echo $string;
?>

Answer 3

您无法在 PHP 中计算显示元素的大小，因为它是在服务器上而不是在客户端上运行的，并且呈现 HTML 的是客户端。

如果您每次都有相同的容器大小以及相同的字体和字体大小和样式以及所有内容，您可能会估计一个字符数并在 PHP 中使用substr 将其截断为该字符数。但即便如此，除非您建立一个字符大小表或使用monospaced font，否则无法可靠地执行您想要的操作。