Question

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

<div  class="hide-long-text">

现在很长一段时间oooooooooooo ooooooooooooooooooooooord

.hide-long-text {
   height: 80px;
    width: 110px;
    border: 1px solid #adb8c0; 
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

这是提琴手link 有人可以给我一个提示，我如何使用这个自由空间，当文本超过div高度时，显示“ ...”

Answer 1

请尝试输入代码：

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

如何使用文本溢出：在整个div高度中省略号

1 个答案: