Php 如何在web开发中实现2行和宽度以适应列？

我要做的是将

$something

最多剪切到2行，并在必要时添加

..

但这种要求在尝试实施时似乎没有线索

欢迎使用php/javascript/css范围内的解决方案

---

有人有想法吗？

我不确定php的字符串方法，但您可以检查truncate方法。尝试为表格单元格查找最大字符数，然后使用该调用$something.truncate（$max_num_of_table_cell）

我认为您遇到了文本长度问题。为此，请使用

wordwrap

函数

手册示例：

<td style="width:230px;overflow:hidden;">
<?php echo $something; ?>
</td>

---

我认为您需要在JavaScript中执行此操作，因为您依赖于浏览器中的最终呈现、正在使用的CSS等

本文讨论如何在显示字符串时查找其长度。您知道列的宽度，所以我想您可以从文本中计算出taht将填充两行的字符数

或者近似地，计算适合mmm的最宽字符的数目，并只取那么多字符

---

或者，在一个隐藏窗口中，创建一个大小合适的表，不断向表中添加字符，直到行高变得太大

正如eykanal所述，您无法准确预测用户的自定义设置。您可以做的唯一一件事是测量一个包含两行文本的元素（在没有填充的[n off screen]div元素中放置少量文本，并测量高度），然后将overflow设置为hidden

有一些技巧可以让你得到省略号，但没有一个是我绝对推荐的。可以将div绝对定位在父元素内（使用相对定位），并将其设置为底部：0，右侧：0，背景颜色与父元素相同，从而覆盖元素中的最后一位文本

     1. A very
        long
        wooooooo
        ooooord.

#母公司{
位置：相对位置；
溢出：隐藏；
宽度：230px；
高度：自动；
背景#f1f1；
}
.省略号{
位置：绝对位置；
右：0；
底部：0；
背景#f1f1；
}
这将是您上面提到的PHP代码插入的文本
...

然后，为了让Javascript获得高度，将其作为伪代码

<style type="text/css">
#parent {
  position:relative;
  overflow: hidden;
  width: 230px;
  height: auto;
  background: #f1f1f1;
}
.ellipsis {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}
</style>

<div id="parent">
  This would be the text that was inserted by the PHP code you mentioned above
  <div class="ellipsis">...</div>
</div>

window.onload=函数（）{
var textDiv=document.createElement（'div'）；
textDiv.style='填充：0；位置：绝对；左侧：-500px；顶部：-500px；'；
textDiv.innerHTML='Getting
Height'；
document.body.appendChild（textDiv）；
变量textHeight=（textDiv.offsetHeight | | textDiv.clientHeight）；
document.body.removeChild（textDiv）；
document.getElementById（'parent'）.style.height=textHeight；
}

当然，如果您使用的是Javascript框架（Mootools、jQuery），那么您可以修改创建元素和设置属性的方式，但这在很大程度上应该可以实现非常接近您所需的功能，只需很少的修改

您还希望使用省略号类将所有元素的高度设置为从javascript检索到的高度的一半

---

这就是我的全部了，伙计。希望能有所帮助。：-）

这将很难实现，因为显示的文本行数并非完全由您控制（回想一下，用户可以更改字体大小，这可以更改文本行数）。你可能想考虑用句子长度或其他标准来限制<代码> $< /代码>。我希望我的老板能理解这一点，但是……这个技巧很酷，但是如何确定有多少个字符可以以编程方式排成一行呢？但是你到底需要多精确呢？假设您过早地截断了一两个字符，那么bacd会是什么样子？准确地做到这一点将是困难的，像这样大致做到这一点可能是最具成本效益的方法

<style type="text/css">
#parent {
  position:relative;
  overflow: hidden;
  width: 230px;
  height: auto;
  background: #f1f1f1;
}
.ellipsis {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}
</style>

<div id="parent">
  This would be the text that was inserted by the PHP code you mentioned above
  <div class="ellipsis">...</div>
</div>

<script type="text/javascript">
window.onload = function() {
  var textDiv = document.createElement('div');
  textDiv.style = 'padding:0;position:absolute;left:-500px;top:-500px;';
  textDiv.innerHTML = 'Getting<br>Height';
  document.body.appendChild(textDiv);

  var textHeight = (textDiv.offsetHeight || textDiv.clientHeight);
  document.body.removeChild(textDiv);

  document.getElementById('parent').style.height = textHeight;
}
</script>