主页 / 问题 / 1067669
Accepted
borodatych
Asked:2020-01-09 18:05:02 +0000 UTC2020-01-09 18:05:02 +0000 UTC

溢出省略号和高度约束或css上的dotdotdot

  • 772

HTML：

<div>
    <p>Длинный текст, выходящий за все разумное, ну могут менеджеры навводить, ну 
       ни как без этого, пытаются впишнуть не впихуемое, а мы беремени потом голову, 
       что бы все красиво было и не разьехалось, вот такая судьба брат
    </p>
</div>

CSS：

div {
  width: 200px;
  height: 100px;
  border: 1px solid gray;
  border-radius: 6px;
  padding: 10px;
}
p {
  position: relative;
  height: 70px;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}
P:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
}

你可以玩jsfiddle

省略号必须紧跟在正文之后！

我做了我的整个头，直到它出来
......我感觉到它而不是如何，但希望仍然存在

当然还有js的dotdotdot
插件，效果很好 但是他们在那里要钱，如果他们正式使用它，据我了解
是的，我不想拖这么多代码因为几个地方

css

1 个回答

  1. Best Answer

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="module line-clamp">
        <p>Длинный текст, выходящий  за все разумное, ну могут менеджеры навводить, ну 
           ни как без этого, пытаются впишнуть не впихуемое, а мы беремени потом голову, 
           что бы все красиво было и не разьехалось, вот такая судьба брат что бы все красиво было и не разьехалось, вот такая судьба брат
        </p>
    </div>

    <style>
        .module {
            width: 350px;
            margin: 0 0 1em 0;
            overflow: hidden;
          }
          .module p {
            margin: 0;
          }
          
          .line-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 5; /* номер строки где указывается троеточие */
            -webkit-box-orient: vertical;  
          }
    </style>
</body>
</html>

    但这仅适用于 webkit 浏览器。

    • 1

相关问题