Skip to content

Use CSS to handle multiline text in Results.vue instead of br tags #7380

@DMedina6

Description

@DMedina6

Refactor the NIST 800-53 Control Families acronyms section in apps/frontend/src/views/Results.vue to render line breaks using CSS (white-space: pre-line) rather than
tags. Apply a CSS class to the v-card-text and update the content to use newline characters in the string.

apps/frontend/src/views/Results.vue

                    <v-card-text class="text-h7">
                      The NIST 800-53 Control Families have the following
                      acronyms:
                      <br /><br />

See AI block below:

In Vuetify 2, you can use the white-space: pre-line; CSS property to display multiline strings inside a v-card-text block without using
. This property ensures that line breaks in the string (e.g., \n) are respected.

Here’s an example:

<template>
  <v-card>
    <v-card-text class="multiline-text">
      This is line one.
      This is line two.
      This is line three.
    </v-card-text>
  </v-card>
</template>

<style scoped>
.multiline-text {
  white-space: pre-line;
}
</style>

In this example:
The white-space: pre-line; CSS property ensures that any line breaks in the text are rendered as new lines.
You can write your multiline string directly in the template, or bind it dynamically using Vue's data or computed properties.

ADDITIONALLY:
If the css mechanism works, then also put the text on the js side such that it is templated in as opposed to hard coded into the html.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions