html - texto - ¿Cómo separar líneas de css, sin usar<br/>?

salto de linea html5

Question

salida:

Hola
Cómo estás

código:

<p>hello <br> How are you </p>

¿Cómo lograr la misma salida sin <br> ?

Answer 1

Para una lista de enlaces

Las otras respuestas proporcionan algunas buenas maneras de agregar saltos de línea, dependiendo de la situación. Pero debe tenerse en cuenta que :after selector es una de las mejores maneras de hacer esto para el control de CSS sobre las listas de enlaces (y cosas similares), por las razones que se detallan a continuación.

Aquí hay un ejemplo, asumiendo una tabla de contenidos:

<style type="text/css">
    .toc a:after{ content: "/a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Y aquí está la técnica de Simon_Weaver, que es más simple y más compatible. No separa tanto el estilo como el contenido, requiere más código y puede haber casos en los que desee agregar saltos después del hecho. Sin embargo, sigue siendo una gran solución, especialmente para IE antiguos.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Tenga en cuenta las ventajas de las soluciones anteriores:

• No importa el espacio en blanco en el HTML, la salida es la misma (vs. pre )
• No se agrega relleno adicional a los elementos (vea la display:block de NickG display:block comentarios de display:block )
• Puede cambiar fácilmente entre las listas de enlaces horizontales y verticales con algunos CSS compartidos sin tener que ir a cada archivo HTML para un cambio de estilo
• No clear estilos float o clear afecten el contenido circundante.
• El estilo es independiente del contenido (vs. <br/> o pre con cortes codificados)
• Esto también puede funcionar para enlaces sueltos usando a.toc:after y <a class="toc">
• Puedes agregar múltiples cortes e incluso texto de prefijo / sufijo

Answer 2

Use <br/> como de costumbre, pero ocúltelo con la display: none cuando no lo desee.

Espero que la mayoría de las personas que encuentren esta pregunta quieran usar el diseño css / responsive para decidir si un salto de línea aparece o no en un lugar específico. (y no tengo nada personal contra <br/> )

Si bien no es obvio de inmediato, puede aplicar display:none a una etiqueta <br/> para ocultarlo, lo que permite el uso de consultas de medios junto con etiquetas BR semánticas.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em) 
 {
    br 
    { 
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

Esto es útil en el diseño de respuesta, donde debe forzar el texto en dos líneas en un corte exacto.

http://jsfiddle.net/nNbD3/1/

Answer 3

¿Qué hay de <pre> etiqueta <pre> ?

fuente: http://www.w3schools.com/tags/tag_pre.asp

Answer 4

Aquí hay una mala solución para una mala pregunta, pero una que literalmente cumple con lo breve:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Answer 5

Configurar una etiqueta br para display: none es útil, pero luego puedes terminar con WordsRunTogether. Me ha resultado más útil reemplazarlo con un carácter de espacio, así:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: '' '';}
    h1 br:after {content: '' '';}
}

Answer 6

El comando "/ a" en CSS genera un retorno de carro. Esto es CSS, no HTML, por lo que debe estar más cerca de lo que desea: sin marcado adicional .

En un blockquote, el siguiente ejemplo muestra tanto el título como el enlace de origen y separa los dos con un retorno de carro ( "/a" ):

blockquote[title][cite]:after {
    content:attr(title)"/a"attr(cite)
}

Answer 7

En caso de que esto ayude a alguien ...

Podrías hacer esto:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Con este css:

a.on-new-line:before { 
  content: '' ''; 
  font-size:0; 
  display:block;
  line-height:0;
}

Answer 8

En el CSS usa el código

p {
    white-space: pre-line;
}

Con este código css, cada ingreso dentro de la etiqueta P será una línea de ruptura en el html.

Answer 9

En mi caso, necesitaba un botón de entrada para tener un salto de línea antes.
Apliqué el siguiente estilo al botón y funcionó:

clear:both;

Answer 10

Esto funciona en Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Answer 11

Hay varias opciones para definir el manejo de espacios en blanco y saltos de línea. Si se puede poner el contenido en, por ejemplo, una etiqueta <p> , es bastante fácil obtener lo que se quiera.

Para preservar saltos de línea, pero no espacios en blanco, use pre-line pre (no pre ) como en:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Si se desea otro comportamiento, elija uno de estos (WS = WhiteSpace, LB = LineBreak):

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

FUENTE: W3 Schools

Answer 12

Imposible con la misma estructura HTML, debes tener algo para distinguir entre Hello y How are you .

Sugiero usar span s para que luego se muestren como bloques (al igual que un <div> realidad).

HTML:

<p><span>hello</span><span>How are you</span></p>

CSS:

p span 
{
    display: block;
}

Answer 13

Las respuestas de Vincent Robert y Joey Adams son válidas. Sin embargo, si no desea cambiar la marca, puede insertar un <br /> usando javascript.

No hay forma de hacerlo en CSS sin cambiar el marcado.

Answer 14

Me gustan las soluciones muy simples, aquí está la más.

<p>hello <span>How are you</span></p>

y css

p {
 display: flex;
 flex-direction: column;
}

Answer 15

No lo hagas Si quieres un salto de línea duro, utiliza uno.

Answer 16

Para hacer que un elemento tenga un salto de línea después, asígnele:

display:block;

Los elementos no flotantes después de un elemento de nivel de bloque aparecerán en la siguiente línea. Muchos elementos, como <p> y <div> ya son elementos de nivel de bloque, por lo que puede usarlos.

Pero si bien es bueno saberlo, esto realmente depende más del contexto de su contenido. En su ejemplo, no querría usar CSS para forzar un salto de línea. El <br /> es apropiado porque semánticamente la etiqueta p es la más apropiada para el texto que está mostrando. No es necesario más marcado solo para colgar el CSS. Técnicamente no es exactamente un párrafo, pero no hay una etiqueta <greeting>, así que usa lo que tienes. Describir bien su contenido con HTMl es mucho más importante: después de eso , descubra cómo hacerlo lucir bonito.

Answer 17

Puede agregar mucho relleno y forzar el texto para que se divida en una nueva línea, por ejemplo

p{
    padding-right: 50%;
}

Funcionó bien para mí en una situación con diseño sensible, donde solo dentro de un cierto rango de ancho era necesario para que el texto se dividiera.

Answer 18

Puedes usar white-space: pre; para hacer que los elementos actúen como <pre> , lo que conserva nuevas líneas. Ejemplo:

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

Tenga en cuenta que esto no funciona en IE6 o IE7. No sé sobre IE8.

Answer 19

Sobre la base de lo que se ha dicho antes, esta es una solución CSS pura que funciona.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "/a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

Answer 20

Supongo que no quiso usar un punto de interrupción porque siempre romperá la línea. ¿Es eso correcto? Si es así, ¿qué le parece agregar un punto de ruptura <br /> a su texto, luego <br class="hidebreak"/> una clase como <br class="hidebreak"/> luego usar la consulta de medios justo encima del tamaño que desea que se rompa para ocultar el <br /> por lo que se rompe en un ancho específico pero permanece en línea por encima de ese ancho.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

Answer 21

Tal vez alguien tenga el mismo problema que yo:

Estaba en un elemento con display: flex así que tuve que usar flex-direction: column .

Answer 22

Use overflow-wrap: break-word; me gusta :

.yourelement{
overflow-wrap: break-word;
}

Answer 23

Utilizando   En lugar de espacios se evitará un descanso.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Answer 24

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

O

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

fuente: https://.com/a/36191199/2377343