Question

所以我的标题很奇怪，但不知道该如何用几句话解释。我有一个定义大小（250px * 70px）的框，并且在此框内有一个文本。本文分为两部分。其中一部分必须绝对保持可见，但另一部分可以被切割。最后必须保留的文本。这是一个示例：

.title {
  width : 250px;
  height : 70px;
  overflow : hidden;
  border : 1px solid black;
}
.stay {
  color : red;
}

<h3 class="title">
  <span class="optionnal" >This is a test</span>
  <span  class="stay"> I MUST STAY</span>
</h3>
<h3 class="title">
  <span class="optionnal">This is a test This is a test This is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title">
  <span class="optionnal">This is a test This is a test This is a test This is a testThis is a test This is a...</span>
  <span class="stay"> I MUST STAY</span>
</h3>

第一个结果不会造成任何麻烦，因为文本不是太大。问题是第二个问题。文字太长，所以我看不到“我必须保持”部分。我想要的第二个是我对第三个结果的期望。但是，您知道...无需手动切割

Answer 1

这是一个 hacky 想法，您需要在其中复制文本。诀窍是始终在容器的右下方放置一个文本，然后其他文本将具有其伪元素，从而创建一个将其隐藏的覆盖层，这样，当该文本不在容器中时，我们只能看到已定位的文本。

要更好地了解技巧，请更改白色以了解覆盖层如何仅隐藏定位的文本。

“必须停留”的文本应占一行，并根据文本的长度手动放置3个点

.title {
  width: 250px;
  height: 70px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
  display:inline-block;
  vertical-align:top;
  margin:5px 0;
}

.title::before {
  content: attr(data-text);
  position: absolute;
  bottom: 3px;
  right: 13px;
  color: red;
  background: #fff;
}
.title::after {
  content: '... ';
  position: absolute;
  bottom: 3px;
  right: 130px;
  color: #000;
  background: #fff;
  padding: 0 3px;
}

.stay {
  color: red;
  position: relative;
  z-index:1;
  background: #fff;
  display:inline-block;
}

.stay::before {
  content: "";
  position: absolute;
  z-index:1;
  top: 100%;
  height: 100vh;
  left: -50vw;
  right: -50vw;
  background: #fff;
}

.stay::after {
  content: "";
  position: absolute;
  z-index:1;
  left: 100%;
  width: 100vw;
  top:0;
  bottom: -50vh;
  background: #fff;
}

<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test This is a test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test This is a test This is a test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test This is a test This is a test a test a test is test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test This is a test This is a test a test a test is test test test test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test This is a test This is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title" data-text="I MUST STAY">
  <span class="optionnal">This is a test This is a test This is a test This is a testThis is a test This is a is a test This is a is a test This is a </span>
  <span class="stay"> I MUST STAY</span>
</h3>

Answer 2

如果可以使用Javascript，请使用@Temani Afif解决方案

Array.from(document.querySelectorAll('.optionnal')).forEach(el => {
  // If the text of "Optionnal" is greater than 84, then ellipse it...
  el.innerText = el.innerText.length > 84 ? el.innerText.slice(0, 84) + '...' : el.innerText
})

.title {
  width : 250px;
  height : 70px;
  overflow : show;
  border : 1px solid black;
}
.stay {
  color : red;
}

<h3 class="title">
  <span class="optionnal" >This is a test</span>
  <span  class="stay"> I MUST STAY</span>
</h3>
<h3 class="title">
  <span class="optionnal">This is a test This is a test This is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a testThis is a test This is a test</span>
  <span class="stay"> I MUST STAY</span>
</h3>
<h3 class="title">
  <span class="optionnal">This is a test This is a test This is a test This is a testThis is a test This is a...</span>
  <span class="stay"> I MUST STAY</span>
</h3>

定义大小的框仅部分溢出

2 个答案: