文章/答案/技术大牛

发布

问引导表响应中断字
EN

Stack Overflow用户

提问于 2018-05-05 09:24:57

回答 1查看 4.3K关注 0票数 0

你好，我有有更多列的表：

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

我需要在列服务器上中断单词，其中name =40个符号。宽度和断字不工作，我的列调整大小。为什么？宽度:157 not不能工作..。

如果做:显示:阻止服务器名称，然后命名到列。

更新

Luminex - Semi-RPG Survival不调整所有宽度的大小。

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-05 09:28:02

您需要给出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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50187821

复制

相似问题

问引导表响应中断字
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导表响应中断字EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导表响应中断字
EN