如何在表单元格中的文本中心溢出时？ [英] How to center text in table cell when it overflow?

问题描述

我想将一些文本放在单元格中间，但文本大于单元格的宽度，因此会向右溢出。

I would like to center some text in the middle of my cell but the text is bigger than the width of the cell so it overflow to the right.

这里是一个JSFiddle的例子： http://jsfiddle.net/p5wg8yyc/2/

Here is a JSFiddle example : http://jsfiddle.net/p5wg8yyc/2/

html

<table>
    <thead>
        <tr>
            <th>Left</th>
            <th>Center</th>
            <th>Right</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>SomeVeryBigTextThatDoesNotFit</td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table, td{
    border:1px solid black;
}

table{
    width:500px;
    border-collapse: collapse;
    table-layout:fixed;
}

td{
    text-align:center;
    color:red;
}

推荐答案

非常简单：

演示 http://jsfiddle.net/p5wg8yyc/9/

.toCenter {
    display: inline-block;
    position: relative;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

这篇关于如何在表单元格中的文本中心溢出时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！