相关疑难解决方法(0)

是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局？

我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.

我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).

有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？

认识Fred.他是一张桌子:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

弗雷德的公寓有一个改变大小的奇怪习惯,因此他学会隐藏他的一些内容,以免推动所有其他单位,并将怀特福德夫人的客厅推到遗忘之中:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

这是有效的,但弗雷德有一种唠叨的感觉,如果他的右侧牢房(他的绰号为Celldito)放弃了一点空间,他的左侧牢房就不会在很多时候被截断.你能救他的理智吗？

总结:一个表的单元格如何均匀地溢出,并且只有当它们都放弃了所有的空白时？

我有这个标记:

<style>
    table
    {
        border:1px solid black;
        width:400px;
        height:300px;
        border-collapse:collapse;
    }
    table tbody
    {
        border:1px solid red;
    }
    table td
    {
        background:yellow;
        padding:10px;
        border-bottom:1px solid green;
        height:20px;
    }
</style>


<table>
<tbody>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
</tbody>
</table>

我需要的是行不会伸展高度.有没有办法固定行高？

我正在尝试构建一个html表,但我想强制所有行具有相同的高度(无论单元格中有多少内容).如果一个单元格超出了空间,我希望它只是切断文本并隐藏其余部分.

这可能是使用CSS等吗？

我有一个动态表,我从用户获得一些输入后生成一些表格数据.我需要知道是否存在为细胞分配固定高度,即使它们中的一些具有一些内容/文本.我希望所有单元格的高度都是30px,无论它们是否有内容或是否为空.

这是我的CSS:

table {
  width: 90%;
  height:100%;

}
    table th,  table td {
      border: 1px solid gray;
      height:30px !important;
      padding: 9px !important;
      width: 16%;
    }

该表由以下代码生成:

foreach ( $this->rows as $i => $row ) {
            $tbody_tr = NHtml::el ('tr class="data-row-' . $i . '"');
            foreach ( $this->fields as $field ) {
                $tbody_tr->add(NHtml::el ('td')->class($field['name'])->setHtml(@$row[$field['name']]));
            }

但是当我有一个有一些文本的单元格时,单元格高度无论如何都会扩展.有任何想法吗？

我需要控制一个表行的高度 - 我已经尝试设置单元格的高度,但我正在撞砖墙.见演示.

tr.fixedRow,
tr.fixedRow td.fixedCell {
     height: 50px;
     overflow: hidden; }

我知道我可以改变display一些东西,block但这样做通常会以糟糕的方式弄乱桌子 - 我正在使用一个相当复杂的桌子,与附近的其他桌子交互,需要排列像素完美,所以一般来说,改变display然后尝试使用CSS再次使它看起来像一个表对我来说不是一个好的解决方案,因为它不会匹配.我需要它来保持一张桌子.

我也想避免这样做:

<td><div>
   ... cell content...
</div></td>

这似乎很糟糕.当然有一个CSS只能解决这么简单的问题吗？

<td>如果它太长,我想修剪一部分.这将确保表格不会搞砸.从数据库中检索下表中的所有数据.在"主题"部分,如果文字超过某个字符限制,我怎么能缩短文字并加上"......"？以下是该表的屏幕截图:

正如您所看到的那样,如果主题过长,可能会使表格陷入困境.

是否有任何jQuery只有在超过一定限度并在结尾处放置"......"时才会修剪元素？我不认为一个截断插件会工作,因为它通常会把它,使断行,我并不需要它表明,因为所有使用该会做的人是点击"查看票",他们会看到那里有完整的主题.

我在StackOverflow上搜索了其他问题,但我找不到我需要的东西.