如何在 div 的全高中使用文本溢出:省略号

use*_*565 3 html css

我试图在 div 块中显示一个长文本,并希望如果文本超过 div 高度,则需要显示“...”,否则将整个文本填充到一个块中。但问题是,使用 css text-overflow:ellipsis 会将整个长文本剪切为一行文本,并将这些点放在可以写入更多文本的下方空间中。

<div  class="hide-long-text">
Run Code Online (Sandbox Code Playgroud)

现在长了呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜

.hide-long-text {
   height: 80px;
    width: 110px;
    border: 1px solid #adb8c0; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)

这是一个提琴手链接 有人可以给我一个提示,我可以如何使用这个可用空间,当文本超过 div 高度时,然后显示“...”

小智 12

请尝试以下代码:

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div {
      width: 200px;
      height: 100px;
      line-height: 20px;
      word-break: break-all;
      background-color: skyblue;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 5;
      -moz-line-clamp: 5;
      -ms-line-clamp: 5;
      line-clamp: 5;
      overflow: hidden;
	}
  </style>
</head>
<body>
  <div>	hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!hello,world!</div>
</body>
Run Code Online (Sandbox Code Playgroud)

  • 关于 css 属性的一些解释可能会有所帮助 (7认同)