javascript - chop 给定宽度(以像素为单位)的 php 字符串

Question

我想 chop 通过 PHP 从 MySQL 数据库获取的给定字符串以适合给定像素。我发现的大多数解决方案都是基于字符数的。但我特别想要根据像素长度。(我不想使用等宽字体)

我发现$('#idName').width()可以在JavaScript中用于拟合。这对于简单地用 HTML 编写的字符串来说效果很好。但事情是这样的。我的字符串是存储在 PHP 中的变量，我需要 JavaScript 来获取以像素为单位的宽度，并且我需要将该字符串放在具有特定 ID 名称的跨度(HTML 中)中。

因此，我尝试使用 PHP、HTML 和 JavaScript 三种语言来使其正常工作。下面是我的代码。

<?php
  $len=100;
?>

<span id='d' style="display:none;"><?php echo substr($details,0,$len) ?></span>
<script>
    var len=370;

    while($('#d').width()>len){
    <?php 
      $len=$len-1; 
      echo "<span id='d' style='display:none;'>" . substr($details,0,$len) . "</span>";
    ?>
    }
    <?php echo substr($details,0,$len); ?>
</script>

因此，我将字符串的前 100 个字母放入一个 ID 为 d 的范围内。然后在 JavaScript 中，我获取它的宽度并检查 while 循环。我运行 while 循环(不断减少 $len)，直到子字符串的像素长度在所需的宽度内，并继续在具有相同 id 的跨度中重新定义该子字符串。然后我打印该子字符串。

有人可以更改代码以使其工作或建议更好的方法吗？我是这方面的新手，所以请尽可能简单。

Answer 1

据我从你的问题中了解到，当字符串比给定的容器长时，你试图 overflow hidden ？

我宁愿建议使用溢出:隐藏；空白:nowrap；也许还有一些文本溢出:省略号；在容器末尾之前制作“...”效果。但您必须记住，大多数浏览器和操作系统的字体呈现方式都不同，因此 Windows 上的用户体验可能与 Mac 上不同。