Question

我想在单元格的中间放置一些文本，但文本大于单元格的宽度，所以它向右溢出。

是否有可能使它从左侧和右侧同样溢出？

这是一个JSFiddle示例：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;
}

Answer 1

实际上只有CSS的方式而且非常简单：

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

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

Answer 2

简单的css修复：http://jsfiddle.net/p5wg8yyc/8/

HTML：

<tr>
    <td><span>AB</span></td>
    <td><span>SomeVeryBigTextThatDoesNotFit</span></td>
    <td></td>
</tr>

CSS：

td span{
    margin-left:-50%;
    margin-right:-50%;    
}

Answer 3

编辑：留给后人，但Arbel的CSS答案是一个更好的方法。

可能需要一些JavaScript来实现这一点。我在这里发布了一个使用jQuery 1.11的例子，它实际上只是帮助选择元素并获取/设置它们的属性：

http://jsfiddle.net/sd8xw5d6/1/

基本上只需获取单元格和文本的宽度并调整定位：

$(function() {
    var textWidth = $(".overflowtext").width();
    var tdWidth = $(".overflowcell").width();
    $(".overflowtext").css("margin-left", tdWidth/2 - textWidth/2);
});

请注意，虽然这样做有效，但您仍然需要考虑窗口调整大小并根据需要进行调整，因为调整大小仅适用于原始窗口大小，但希望这可以帮助您入门。

Answer 4

这就是你需要的

＆＃13;

           table, td{
    border:1px solid black;
}

table{
    table-layout: fixed;
    width:500px;
    border-collapse: collapse;
    table-layout:fixed;
}

td{
    word-wrap:break-word;
    text-align:center;
    color:red;
}

＆＃13;

       <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>

＆＃13;

当表格单元格中的文本溢出时如何居中？

4 个答案: