html - sobrepasa - texto en una sola linea css

¿Cómo puedo ajustar o romper texto/palabra largos en un ancho de ancho fijo?

Question

Quiero crear un espacio con un ancho fijo que cuando <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span> cualquier cosa en el espacio como <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span> , una larga cadena de texto no espaciado, la palabra se rompe o se ajusta a la siguiente línea.

¿Algunas ideas?

Answer 1

Agregué a mi código detrás. Respuesta similar a la anterior.

   Dim lblSite As Label
   lblSite.Text = "lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk"
   lblSite.Attributes.Add("style", "display:inline-block;width:175px;word-wrap:break-word;white-space: normal")

Answer 2

Intente seguir css:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

Answer 3

Me gusta esto

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

Answer 4

Por defecto, un span es un elemento en inline ... así que ese no es el comportamiento predeterminado.

Puede hacer que el span comporte de esa manera agregando display: block; a su CSS.

span {
    display: block;
    width: 100px;
}

Answer 5

Prueba esto

span {
    display: block;
    width: 150px;
}

Answer 6

Puede usar la propiedad de CSS word-wrap:break-word; , que romperá las palabras si son demasiado largas para el ancho de su tramo.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Answer 7

Solo para ampliar el alcance práctico de la pregunta y como un apéndice a las respuestas dadas: a veces puede ser necesario especificar los selectores un poco más.

Al definir el intervalo completo como pantalla: bloque en línea puede que tenga dificultades para visualizar imágenes.

Por eso prefiero definir un lapso así:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}