在下面的示例中，有一个 bootstrap 方法截断（最后用省略号）div中ID为text2的未知长度的多行文本，以便其父列的高度身份column2与column1的高度相匹配？我的解决方法是将position-absolute类提供给text2的div并将overflow:hidden应用于column2，但这当然会削减文本而不是截断它。
另一种方法是在column2的末尾添加一个绝对定位的元素，并应用渐变背景以使文字“淡化”。最后，但它不适用于我的情况，因为<body>标签的背景颜色也随机变化。
使用-webkit-line-clamp的技巧需要设置静态高度以进行钳位，并使其跨浏览器兼容，因为我无法预测文本的长度 - 我无法知道高度。此外，由于我的响应式设计在Bootstrap的宽度阈值的每个@media查询中更改了字体大小，因此无关紧要。
https://www.codeply.com/go/PNsIY4PWdG
<div class="container">
<div class="row">
<div id="column1" class="col-6">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/600x350" class="img-fluid"></a>
</div>
<div id="column2" class="col-6">
<div id="text1">
<h5>text 1 (of unknown length) Lorem ipsum dolor sit amet , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </h5>
</div>
<div id="text2">
<p>text 2 (also of unknown length) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>