[Vuejs]-Display Read more on the same line as v-html

by

3👍

The div is display:block by default, which starts the element on its own line, pushing Read more to the next line.

You could change the div to a span, which is display:inline by default. This assumes that the HTML variable doesn’t contain an element that pushes elements to the next line like the original div.

demo 1

If your HTML variable contains display:block elements (such as div or p), you could apply a class to the HTML container that forces its last child element (with :nth-last-child) to 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>

demo 2

👤tony19

Leave a comment