Question

我在 rem 中有％宽度和高度的块，我需要用随机长度的文本填充它。我需要可见行数（块有溢出：隐藏）为整数，最后一行以“...读取全文”链接结束。当然，这必须适用于每种字体/行大小和任何页面比例。

如何实现这一目标？

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
  consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
  est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</div>


.content {
  width: 50%;
  height: 15rem;
  overflow: hidden;
}

Answer 1

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
  overflow: hidden;
  height: 200px;
	line-height: 25px;
	margin: 20px;
	border: 1px solid #AAA;
  }

.ellipsis:before {
	content:"";
	float: left;
	width: 5px; height: 200px; }

.ellipsis > *:first-child {
	float: right;
	width: 100%;
	margin-left: -5px; }		

.ellipsis:after {
	content: "\02026";  
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	float: right; position: relative;
	top: -25px; left: 100%; 
	width: 3em; margin-left: -3em;
	padding-right: 5px;
	text-align: right;
  background-size: 100% 100%;
}

<div class="ellipsis"><div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
  consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
  est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</p>  
</div></div>

Answer 2

对于信息而且不可靠。

使用 CSS ，您可以尝试使用mix-blend-mode和position:sticky。但是大部分浏览器都不会播放（此时，FF＆amp; Chrome同时理解混合混合模式和粘性）。

.content {
  float: left;
  border: solid;
  margin: 1%;
  width: 45%;
  height: 11rem;
  overflow: hidden;
  background: yellow;
  text-align: justify;
  /*text-align-last:justify;for test purpose only */
}

.content:after {
  position: sticky;
  bottom: 0;
  float: right;
  margin-left: -1em;
  width: 1em;
  content: '...';
  display: inline-block;
  background: inherit;
  mix-blend-mode: screen;
  z-index: 1;
}

.disclaimer {
  mix-blend-mode: difference;
}

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
  consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
  est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? <br/> 
<b class="disclaimer">If you see this text, mix-blend-mode is not supported</b></div>

如何自动剪切文本以适应固定的块大小？

2 个答案: