Question

我有一个表，该表中的每一行都有一个描述，该描述可能类似于：

This is an example:
    - Example 1
    - Example 2
    - Example 3

现在，我想将描述限制为1行，并进行溢出处理：将其隐藏起来，并保留换行符，这样就永远不会显示- Example 1。

如果可能的话，我想用纯CSS + HTML来做。

我已经尝试了以下方法：

.overflowing-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
    max-height: 30px;
    max-width: 20%;
}

max-width和max-height都没有做任何事情，因此我假设它的white-space: pre-line会在此处覆盖某些内容。

jsbin示例： https://jsbin.com/nowuxot

th, td {
  padding: 15px;
  text-align: left;
  border: 1px solid #ddd;
}
th {
  border-bottom: 1px solid;
}
table {
  width: 100%;
  border-collapse: collapse;
}

.overflowing-description {
  text-overflow: ellipsis;
  max-height: 20px;
  overflow: hidden;
  white-space: pre-line;
  max-width:5%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <table>
   <thead>
     <tr>
       <th>
         name
       </th>
       <th>
         price
       </th>
       <th>
         description
       </th>
     </tr>
   </thead>
   <tbody>
   <tr>
     <td>
       Example
     </td>
     <td>
       123
     </td>
     <td class="overflowing-description">
       asd asd asd asd 
       asd
       asd
       asd
     </td>
   </tr>
   <tr>
     <td>
       Example
     </td>
     <td>
       123
     </td>
     <td class="overflowing-description">
       asd asd asd asd 
       asd
       asd
       asd
     </td>
   </tr>
   <tr>
     <td>
       Example
     </td>
     <td>
       123
     </td>
     <td class="overflowing-description">
       asd asd asd asd 
       asd
       asd
       asd
     </td>
   </tr>
 </table>
</body>
</html>

Answer 1

一个评论-您不能更改td的高度。将文本放在p中：

<td><p class="overflowing-description">asd asd asd asd</p></td>

第二，这足以隐藏下一行并保留换行符：

.overflowing-description {
    max-height: 1rem;
    overflow: hidden;
    white-space: pre-line;
}

关于显示省略号，我曾经见过使用JavaScript自动添加它的解决方案，但是纯CSS也有可能。参见that link。

在文本Blob中保留换行符，但限制为一行

1 个答案: