你好，我有一个包含更多列的表:
.server-name {
max-width: 200px;
word-wrap: break-word;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<table class="table serverlist">
<thead>
<tr>
<th scope="col" class="rank">Ранг</th>
<th scope="col" class="server-name">Имя</th>
<th scope="col" class="version">Версия</th>
<th scope="col" class="server-info">Сервер</th>
<th scope="col" class="status">Игроков</th>
<th scope="col" class="online">Статус</th>
<th scope="col" class="rating">Рейтинг</th>
</tr></thead>
<tbody>
<tr>
<td class="rank">
<span>1</span>
</td>
<td class="server-name">
<a href="">Luminex - Semi-RPG Survival</a></td>
<td class="version">
<a href="">1.12.1</a>
</td>
<td class="server-info">
<div class="img-banner">
<img src="http://minecraftrating.ru/uploads/servers/29700/29700.gif?8185" alt="">
</div>
<div class="server-ip clearfix"><p><i class="ion-ios-world"></i>
<span>play.minesuperior.com</span></p>
<a href="#!" onclick="copyToClipboard('play.minesuperior.com', $(this))" class="copy-action"><span class="copy-text"><i class="ion-scissors"></i>
Копировать
</span>
</a>
</div>
</td>
<td class="status">18/27</td>
<td class="online"><span class="badge badge-success">Online</span></td>
<td class="rating"><span class="balls">225 <i class="balls fa fa-star"></i></span> <span class="votes">335 <i class="votes fa fa-thumbs-up"></i></span></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>我需要在列服务器上打断单词，其中名称 = 40 个符号。宽度和中断词不起作用，我的列调整大小。为什么？宽度:157px 无效...
如果这样做:显示:在服务器名称上阻塞，然后命名为列。
更新
Luminex - Semi-RPG Survival 不调整所有宽度..
最佳答案
你需要给 td 的内部元素设置宽度。
.server-name a {
width: 157px;
word-wrap: break-word;
display:block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<table class="table serverlist">
<thead>
<tr>
<th scope="col" class="rank">Ранг</th>
<th scope="col" class="server-name">Имя</th>
<th scope="col" class="version">Версия</th>
<th scope="col" class="server-info">Сервер</th>
<th scope="col" class="status">Игроков</th>
<th scope="col" class="online">Статус</th>
<th scope="col" class="rating">Рейтинг</th>
</tr></thead>
<tbody>
<tr>
<td class="rank">
<span>1</span>
</td>
<td class="server-name">
<a href="">Luminex - Semi-RPG Survival</a></td>
<td class="version">
<a href="">1.12.1</a>
</td>
<td class="server-info">
<div class="img-banner">
<img src="http://minecraftrating.ru/uploads/servers/29700/29700.gif?8185" alt="">
</div>
<div class="server-ip clearfix"><p><i class="ion-ios-world"></i>
<span>play.minesuperior.com</span></p>
<a href="#!" onclick="copyToClipboard('play.minesuperior.com', $(this))" class="copy-action"><span class="copy-text"><i class="ion-scissors"></i>
Копировать
</span>
</a>
</div>
</td>
<td class="status">18/27</td>
<td class="online"><span class="badge badge-success">Online</span></td>
<td class="rating"><span class="balls">225 <i class="balls fa fa-star"></i></span> <span class="votes">335 <i class="votes fa fa-thumbs-up"></i></span></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>关于html - Bootstrap 表响应断词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50187821/