如何在表格单元格溢出时将文本居中？

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-答案是好得多的方法。

---

可能需要一些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 2

实际上只起了CSS的方式，这是非常简单的：

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

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

Answer 3

这里就是你需要

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

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

Answer 4

简单的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%;  
}