如何点击div元素修改文本但不改变其自身尺寸？

我完全懂你遇到的困扰——井字棋的格子每次点击切换文本后，居然跟着变大小，游戏界面一下就乱了。别担心，这问题本质是div默认的尺寸规则在搞鬼，咱们几步就能搞定：

问题根源 #

默认状态下，div的宽高是自适应内容的。当你把空格子改成X/O，或者切换不同字号的文本时，浏览器会自动调整div的尺寸来容纳新内容，这就是格子变大的原因。要解决这个，核心就是给格子「定死」尺寸，不管内容怎么变都不松口。

具体解决方案 #

1. 给游戏格子添加固定尺寸的CSS样式 #

假设你的每个游戏格子是带Cell类的div（如果不是，换成你实际用的类名就行），添加下面的CSS：

.Cell {
  /* 固定宽高，根据你的视觉需求调整数值 */
  width: 100px;
  height: 100px;
  /* 加上边框模拟棋盘，可选 */
  border: 2px solid #222;
  /* 文本水平居中 */
  text-align: center;
  /* 单行文本垂直居中：line-height和height一致 */
  line-height: 100px;
  /* 设置合适的字号，避免文本超出格子 */
  font-size: 3rem;
  /* 鼠标悬停显示手型，提升交互感 */
  cursor: pointer;
  /* 关键：让边框和padding包含在设定的宽高内 */
  box-sizing: border-box;
  /* 防止极端情况文本溢出（比如误输入长文本） */
  overflow: hidden;
}

关键属性解释：

• box-sizing: border-box：这个属性非常重要！它会把border和padding都算在你设定的width/height里面，不然加了边框后，格子的总尺寸会比你设置的大（比如100px宽+2px边框，总宽会变成104px），用了它就不会出现这种情况。
• line-height: 100px：配合text-align: center，能让X/O完美居中在格子里，不会偏移。

2. 确保你的HTML结构正确 #

把每个游戏格子都加上Cell类，比如：

<div class="Table">
  <h1>Tic-Tac-Toe Game</h1>
  <div id="message">messages will go here</div>
  <div class="Row">
    <div class="Cell" onclick="updateCell(this)"></div>
    <div class="Cell" onclick="updateCell(this)"></div>
    <div class="Cell" onclick="updateCell(this)"></div>
  </div>
  <div class="Row">
    <!-- 剩下的格子同理 -->
  </div>
</div>

3. 文本修改的JavaScript示例 #

这里给个简单的点击切换X/O的函数，确保修改文本时不会触发尺寸变化：

function updateCell(cell) {
  if (cell.textContent === '') {
    cell.textContent = 'X';
  } else if (cell.textContent === 'X') {
    cell.textContent = 'O';
  } else {
    cell.textContent = '';
  }
}

效果验证 #

设置完之后，不管你点击格子切换空/X/O，每个格子的宽高都会牢牢固定在你设置的数值上，再也不会跟着内容乱跑了。你可以根据自己的游戏风格，调整width、height和font-size的数值，让文本和格子比例更协调。

内容的提问来源于stack exchange，提问作者Yoav Linder