Question

我有一个包含一些 HTML 的文本，然后我使用 v-html 来显示文本。由于文本相当长，我需要一个用户可以点击的 Read more。 Read more 必须与文本在同一行。

代码变成这样：

<div v-html="some-variable-containing-html"></div>
<a @click="makeMoreTextVisible()">Read more</a>

因为我希望 Read more 正好在 HTML 文本结束的地方开始，所以我通常会使用 display:inline，但在这里它不起作用。

有人遇到过这个问题吗？

Answer 1

默认情况下，div 是 display:block，它在自己的行开始元素，将 Read more 推到下一行。

您可以将 div 更改为 span，默认情况下为 display:inline。这假设 HTML 变量不包含像原始 div 那样将元素推送到下一行的元素。

demo 1

如果您的 HTML 变量包含 display:block 元素（例如 div 或 p），您可以将一个类应用于强制其最后一个子元素的 HTML 容器（使用 {{3 }}) 到 display:inline：

<template>
  <div>
    <div class="container" v-html="myHtml"></div>
    <a @click="makeMoreTextVisible()">Read more</a>
  </div>
</template>

<style>
.container {
  display: inline;
}
.container :nth-last-child(1) {
  display: inline;
}
</style>

:nth-last-child

与 v-html 在同一行显示阅读更多

1 个答案: