Question

仅出现在Firefox中。只需在1个单元格的开头添加换行符即可查看发生的情况，或查看屏幕截图。我想要的是： 1.列宽必须保持不变 2.表必须仅以高度增长

<style>
td {
  white-space: pre-wrap;
  word-break: break-all;
  width: 200px;
}
</style>
<table border="1">
  <caption>Таблица размеров обуви</caption>
  <tr>
    <th>Россия</th>
    <th>Великобритания</th>
    <th>Европа</th>
    <th>Длина ступни, см</th>
  </tr>
  <tr>
    <td contenteditable="true">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td contenteditable="true">3,5</td>
    <td contenteditable="true">36</td>
    <td contenteditable="true">23</td>
  </tr>
  <tr>
    <td contenteditable="true">35,5</td>
    <td contenteditable="true">4</td>
    <td contenteditable="true">36⅔</td>
    <td contenteditable="true">23–23,5</td>
  </tr>
  <tr>
    <td contenteditable="true">36</td>
    <td contenteditable="true">4,5</td>
    <td contenteditable="true">37⅓</td>
    <td contenteditable="true">23,5</td>
  </tr>
  <tr>
    <td contenteditable="true">36,5</td>
    <td contenteditable="true">5</td>
    <td contenteditable="true">38</td>
    <td contenteditable="true">24</td>
  </tr>
  <tr>
    <td contenteditable="true">37</td>
    <td contenteditable="true">5,5</td>
    <td contenteditable="true">38⅔</td>
    <td contenteditable="true">24,5</td>
  </tr>
  <tr>
    <td contenteditable="true">38</td>
    <td contenteditable="true">6</td>
    <td contenteditable="true">39⅓</td>
    <td contenteditable="true">25</td>
  </tr>
  <tr>
    <td contenteditable="true">38,5</td>
    <td contenteditable="true">6,5</td>
    <td contenteditable="true">40</td>
    <td contenteditable="true">25,5</td>
  </tr>
  <tr>
    <td contenteditable="true">39</td>
    <td contenteditable="true">7</td>
    <td contenteditable="true">40⅔</td>
    <td contenteditable="true">25,5–26</td>
  </tr>
  <tr>
    <td contenteditable="true">40</td>
    <td contenteditable="true">7,5</td>
    <td contenteditable="true">41⅓</td>
    <td contenteditable="true">26</td>
  </tr>
  <tr>
    <td contenteditable="true">40,5</td>
    <td contenteditable="true">8</td>
    <td contenteditable="true">42</td>
    <td contenteditable="true">26,5</td>
  </tr>
  <tr>
    <td contenteditable="true">41</td>
    <td contenteditable="true">8,5</td>
    <td contenteditable="true">42⅔</td>
    <td contenteditable="true">27</td>
  </tr>
  <tr>
    <td contenteditable="true">42</td>
    <td contenteditable="true">9</td>
    <td contenteditable="true">43⅓</td>
    <td contenteditable="true">27,5</td>
  </tr>
  <tr>
    <td contenteditable="true">43</td>
    <td contenteditable="true">9,5</td>
    <td contenteditable="true">44</td>
    <td contenteditable="true">28</td>
  </tr>
  <tr>
    <td contenteditable="true">43,5</td>
    <td contenteditable="true">10</td>
    <td contenteditable="true">44⅔</td>
    <td contenteditable="true">28–28,5</td>
  </tr>
  <tr>
    <td contenteditable="true">44</td>
    <td contenteditable="true">10,5</td>
    <td contenteditable="true">45⅓</td>
    <td contenteditable="true">28,5–29</td>
  </tr>
  <tr>
    <td contenteditable="true">44,5</td>
    <td contenteditable="true">11</td>
    <td contenteditable="true">46</td>
    <td contenteditable="true">29</td>
  </tr>
  <tr>
    <td contenteditable="true">45</td>
    <td contenteditable="true">11,5</td>
    <td contenteditable="true">46⅔</td>
    <td contenteditable="true">29,5</td>
  </tr>
  <tr>
    <td contenteditable="true">46</td>
    <td contenteditable="true">12</td>
    <td contenteditable="true">47⅓</td>
    <td contenteditable="true">30</td>
  </tr>
  <tr>
    <td contenteditable="true">46,5</td>
    <td contenteditable="true">12,5</td>
    <td contenteditable="true">48</td>
    <td contenteditable="true">30,5</td>
  </tr>
  <tr>
    <td contenteditable="true">47</td>
    <td contenteditable="true">13</td>
    <td contenteditable="true">48⅔</td>
    <td contenteditable="true">31</td>
  </tr>
  <tr>
    <td contenteditable="true">48</td>
    <td contenteditable="true">13,5</td>
    <td contenteditable="true">49⅓</td>
    <td contenteditable="true">31,5</td>
  </tr>
</table>
</body>

</html>

https://jsfiddle.net/s8q0evkf/

Answer 1

使用max-width设置最大宽度

td {
  white-space: pre-wrap;
  word-break: break-all;
  width: 200px;
  max-width: 200px;
}

溢出的内容现在将以高度而不是宽度溢出。

文档：http://www.w3schools.com/cssref/pr_dim_max-width.asp

列宽小故障与contenteditable

1 个答案: