Present the "Read more" button aligned with v-html content

Question

Present the "Read more" button aligned with v-html content

I have some HTML content that I want to display using the v-html directive. The text is quite lengthy, so I am looking to add a clickable Read more link that appears on the same line as the text.

The code structure would look like this:

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

Typically, I would use display:inline to ensure the Read more link aligns with the end of the HTML text, but it doesn't seem to work in this case.

Has anyone encountered this issue before?

css vue.js

Answer 1

Answer №1

The default setting for the div is display:block, which causes the element to start on its own line, pushing the Read more text to the next line.

If you switch the div to a span, it will be set to display:inline by default. This assumes that there are no elements in the HTML variable that would force elements onto a new line like the original div.

Check out demo 1 here

In cases where your HTML variable contains elements styled with display:block (such as div or p), you can add a class to the HTML container that makes its last child element use 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>

See demo 2 for reference

Answer 2

The default setting for the div is display:block, which causes the element to start on its own line, pushing the Read more text to the next line.

If you switch the div to a span, it will be set to display:inline by default. This assumes that there are no elements in the HTML variable that would force elements onto a new line like the original div.

Check out demo 1 here

In cases where your HTML variable contains elements styled with display:block (such as div or p), you can add a class to the HTML container that makes its last child element use 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>

See demo 2 for reference

Present the "Read more" button aligned with v-html content

Answer №1

Similar questions

How can you display an image with text on hover in a simple way?

Issue with checkbox v-model not syncing with asynchronous data retrieval

Incorporating Vue.js components into PHP applications

TypeScript is unable to recognize files with the extension *.vue

How to transform a JQuery button into a dropdown menu

What is the best way to add a directional hover effect to a filter?

Javascript and CSS combo for creating a stylish fade effect

Having trouble with basic HTML/CSS functionality not functioning properly

What is the best way to remove an event binding before navigating to a different page in NUXTjs?

How can I make my div change color when the check-box is selected?

Conceal all alphabetical characters exclusively within paragraph content

Is there a way to center the pagination at the bottom of the screen?

React App build isn't displaying all elements on the webpage

Issue with sticky navbar in parallax design

Move a div by dragging and dropping it without creating duplicates

What is the best way to create a responsive mobile menu?

align items center with respect to my central element

Firebase integration for vusjs dropzone image uploads encountering issue with storage functionality

Methods for refreshing a child component when new elements are added to a data array

A plugin for TypeScript that highlights nearly every line in Vue files as errors with underscores