Inicia sesión


Saltos de línea en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales de saltos de línea - line breaks en CSS3.
En Unicode, el personaje 0x000A está especialmente diseñado para controlar saltos de línea. En CSS, podemos escribirlo como 000A o \A. Podemos usarlo como el contenido del pseudo-elemento ::after, y añadirlo al elemento especificado, para lograr un salto de línea.
Background:Unicode, white-space.
<style>
  main{
    width: 100%;
    padding: 52px 39px;
    background: rgba(180,160,120,.1);
  }
  span.key {
    padding-right: 6px;
  }
  span.bold {
    line-height: 2em;
    font-weight: bold;
  }
  span.br::before {
    content: "\A";
    white-space: pre;
  }
  span.bold + span.bold::before {
    content: ", ";
    font-weight: 500;
    margin-left: -.25em;
  }    
</style>

  <main class="main">
    <span class="key">👦🏿Name:</span>
    <span class="bold">OmegaYalfa</span>
    <span class="key br">👨🏼‍💻GitHub:</span>
    <span class="bold">https://github.com/OMEGAYALFA</span>
    <span class="key br">🌎TL:</span>
    <span class="bold">https://tutorialesenlinea.es</span>
</main>
En el código anterior, hay un espacio delante de la coma agregada entre los múltiples elementos span.bold a través del pseudo-elemento. El margen negativo margin-left: -.25em;se utiliza para compensar los huecos que aparecen.
Ver resultado


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-10
  • Categorias: Diseño Web CSS3 html5 Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial