javascript - 网页上多行文本上的省略号 + 引号-6ren

javascript - 网页上多行文本上的省略号 + 引号

In lại Tác giả: Walker 123 更新时间：2023-11-28 03:11:37

我想在一段文本周围加上引号。文本不能超过 3 行:如果超过，我想要一个省略号(并且我仍然想要引号)。我附上我现在拥有的东西。我的解决方案使用 JS:虽然纯 CSS 解决方案是理想的，但可能的 CSS 解决方案目前似乎处于实验阶段或处于草稿状态(例如 line-clamp )。另外，我不喜欢这个解决方案的是省略号和结束引号字符重叠(正如您运行代码片段时可以看到的那样)。有建议吗？

[...document.getElementsByTagName('div')].forEach(d => {
  if (d.scrollHeight > d.clientHeight) d.getElementsByClassName('onlyForClampedText')[0].className += " show";
})

div {
  chiều rộng: 200px;
  max-height: 40px;
  lề dưới: 20px;
  tràn: ẩn;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  //text-overflow: ellipsis;
  vị trí: tương đối;
}

.onlyForClampedText {
  hiển thị: không có;
}

.onlyForClampedText.show {
  vị trí: tuyệt đối;
  phải: 0;
  đáy: 0;
  hiển thị: khối;
}

"very short text""

"longer text longer text longer text longer text""

"longest text ever!! Really long, o so long! long long long and i'm not even finished yet lol, I could go on for like this forever, but i'll stop here""

câu trả lời hay nhất

纯 CSS 解决方案:

span {
	chiều rộng tối đa: 200px;
	max-height: 40px;
	tràn: ẩn;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	tràn văn bản: dấu chấm lửng;
	vị trí: tương đối;
}

div {
	vị trí: tương đối;
	padding: 0 10px;
	hiển thị: khối nội tuyến;
}

div::before,
div::after {
	content: '"';
	hiển thị: khối nội tuyến;
	vị trí: tuyệt đối;

}

div::before {
	trái: 0;
}

div::after {
	đúng:0;
	bottom:0
}


  
    small text ever!!



  
    longest text ever!! Really long, o so long! long long long and i'm not even finished yet lol, I could go on for like this forever, but i'll stop here

关于javascript - 网页上多行文本上的省略号 + 引号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60052997/