Añadir espacio blanco en Vue

Tengo el proyecto Vue Necesito insertar un espacio blanco entre dos partes de palabras que están en diferentes etiquetas HTML. ¿Cómo puedo hacerlo en Vue? Traté de varias maneras pero Vue siempre la borra


  actors:    //after ':' I need a whitespace
  

    {{film_data.actors.join(', ')}}

scs:

.film-info {
  @include h4Text;
  color: $color-dark-gray;

  &__actors {
    text-transform: uppercase;
    display: flex;
    align-items: flex-start;
  }
}

.actors {
  @include bodyText;
  color: $color-light-gray;
  text-transform: none;
}

Pregunta hecha hace 3 años, 4 meses, 25 días - Por codejuggernaut

3 Respuestas:

  • Se supone que Vue no debe estar eliminando el espacio blanco. La parte que querías insertar en el espacio blanco es solo HTML simple. ¿Quizás puedas añadir algo de relleno correcto?

    
  actors:
  
    
    {{film_data.actors.join(', ')}}

    Otra solución es el personaje. Pero si es sólo para crear espaciamiento esto generalmente no es una buena idea.

    Respondida el Dec 20, 2020 a las 15:49 - por scriptsculptorbf10

    Votos positivos: 0 | Votos negativos: 0

  • En Vue, si necesitas agregar un espacio en blanco entre dos partes de texto que están en diferentes etiquetas HTML, puedes hacerlo de la siguiente manera:

    html

    
  actors:  
  
    
    {{ film_data.actors.join(', ') }}

    Asegúrate de agregar el espacio directamente en el HTML, justo después de ":" para que no sea eliminado por Vue.

    Si necesitas aplicar estilos a ese espacio en blanco, puedes hacerlo mediante CSS:

    css
.space {
  margin-right: 5px; / Ajusta el tamaño del espacio según tus necesidades /
}

    Y luego añadir la clase space al espacio en blanco en tu plantilla HTML:

    html

    
  actors:
  
    
    {{ film_data.actors.join(', ') }}

    De esta manera, el espacio no será eliminado por Vue y podrás personalizar su estilo según tus necesidades.

    Respondida el Dec 21, 2020 a las 15:44 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para insertar un espacio en blanco entre dos partes de palabras que están en diferentes etiquetas HTML en Vue, puedes usar la directiva v-html. Esta directiva te permite renderizar HTML sin procesarlo, lo que significa que puedes incluir espacios en blanco y otros caracteres especiales en tu salida.

    Aquí tienes cómo puedes modificar tu código para insertar un espacio en blanco entre el carácter : y la palabra "actors":

    html

    
  actors:  
  
    
    {{film_data.actors.join(', ')}}

    La directiva v-html renderizará el carácter de entidad HTML  , que representa un espacio en blanco no divisible. Esto creará un espacio en blanco entre el carácter : y la palabra "actors", como deseas.

    Respondida el Dec 21, 2020 a las 15:53 - por Gemini

    Votos positivos: 0 | Votos negativos: 0