CSS Word Break y Word Wrap no funciona

Question

¿Puedo buscar ayuda? Word Wrap o Word Break no está trabajando en mi cuerda, Este es el texto, Los ingresos de la compañía han ido aumentando durante los últimos cinco años con un crecimiento global del 49% entre 2015 y 2019. Los ingresos aumentaron 7% a $426.4 millones para el año terminado el 29 de diciembre de 2019, en comparación con $398.2 millones para el año terminado el 30 de diciembre de 2018. El aumento fue impulsado principalmente por $28.5 millones en ingresos incrementales de unas 359 semanas operativas adicionales proporcionadas por nuevos restaurantes abiertos durante y después del año terminado el 30 de diciembre de 2018, así como un aumento en sus ventas de restaurantes comparables. Los ingresos netos aumentaron en 0,7 millones de dólares y 12% a 6,2 millones de dólares para el año terminado el 29 de diciembre de 2019 en comparación con 5,5 millones de dólares durante el período comparable en 2018. Ello se debió al aumento de los costos de depreciación y amortización, así como al aumento de las prestaciones fiscales de ingresos. Los equivalentes en efectivo de la compañía a finales de 2019 ascendieron a 10,1 millones de dólares, un aumento de 2 millones de dólares del año anterior. Las actividades operacionales generaron 43,4 millones de dólares, mientras que las actividades de inversión utilizaron 33,3 millones de dólares. Las actividades de financiación utilizaron otros 8,3 millones de dólares principalmente para las adquisiciones comunes de existencias y la línea de pagos de crédito. Este es mi CSS .txt { word-break: break-all; word- wrap: break-word; min-height:150px; max-width:150px; overflow-x: auto; } Aquí está mi HTML {{ $value }} Lo que pasa es La cadena no está rompiendo muestra en una línea, incluso si el desbordamiento está oculto o no,

csscraftsman · Accepted Answer

Parece funcionar bien: .txt { word-break: break-all; word-wrap: break-word; min-height:150px; max-width:150px; overflow-x: auto; } The company's revenue has been increasing for the last five years with an overall growth of 49% between 2015 and 2019. Revenue increased 7% to $426.4 million for the year ended December 29, 2019, as compared to $398.2 million for the year ended December 30, 2018. The increase was primarily driven by $28.5 million in incremental revenue from an additional 359 operating weeks provided by new restaurants opened during and subsequent to the year ended December 30, 2018 as well as an increase in its comparable restaurant sales. Net income increased by $0.7 million and 12% to $6.2 million for the year ended December 29, 2019 as compared to $5.5 million during the comparable period in 2018. This was due to the increase in depreciation and amortization costs, as well as the increase in income tax benefits. The company's cash equivalents at the end of 2019 totaled $10.1 million, an increase of $2 million from the previous year. Operating activities generated $43.4 million, while investing activities used $33.3 million. Financing activities used another $8.3 million primarily for common stock repurchases and line of credit payments. ¿Has  inspeccionado  a tu div para ver si alguna otra regla de css está arruinando la cosa? Cuando golpeas F12 en su navegador y luego seleccionar su div ya sea haciendo clic en ella (1 o 2), verás qué estilos se aplican en 3.Probablemente lo verás. word- break: break-all; o lo mismo con word-wrap porque está anulada por otra regla.

cybermage · Answer

puedes hacer esto en lugar de anidar div en td

.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
}


  
    skdjfhskadjfhsdlkajfhdsakljfhsdakjfhslkadjfhsdalkjfhsadlkjfhsdalkjfhsadlkjfhsdakljfhsdalkjfhsadlkjfhsdalkjfhsladkjfhslakjfhlskadjfh

Respondida el Dec 17, 2020 a las 08:11 - por cybermage

Gpt · Answer

El problema en tu código es que estás aplicando las propiedades word-break y word-wrap a un elemento div que es un elemento de bloque. Estas propiedades generalmente se aplican a elementos de línea como texto o cadenas dentro de un párrafo.

Para resolver esto, puedes envolver tu texto en un párrafo en lugar de un div. Aquí te muestro cómo podrías modificar tu HTML y CSS:

HTML:

html

   {{ $value }}

CSS:

css
.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
  overflow-x: auto;
}

Con estos cambios, las propiedades word-break y word-wrap deberían funcionar adecuadamente en el texto dentro del párrafo.

Respondida el Dec 18, 2020 a las 07:59 - por Gpt

Gemini · Answer

Causa potencial: Parece que has configurado correctamente las propiedades CSS word-break y word-wrap. Sin embargo, el problema podría estar en otro lugar en tu código o configuración. Solución: 1 . Verifica las propiedades de ancho: El CSS especifica un max-width de 150px. Esto podría estar truncando el texto en una sola línea, incluso si word-wrap y word-break están configuradas. Intenta aumentar el max-width para permitir que el texto fluya más. 2 . Inspecciona el elemento: Usa las herramientas de desarrollo de tu navegador para inspeccionar el elemento txt. Verifica si hay otras propiedades CSS que puedan estar afectando el flujo de texto, como white-space: nowrap. 3 . Verifica el contenido HTML: Asegúrate de que el contenido HTML no tenga espacios de no ruptura ( ) o caracteres de nueva línea (por ejemplo,
). Estos pueden impedir que el texto se ajuste o envuelva. 4 . Elimina sangrías y márgenes: Cualquier sangría o margen en el CSS del contenedor podría estar afectando el flujo de texto. Intenta eliminarlos para ver si resuelve el problema. Código CSS actualizado: .txt { word-break: break-all; word-wrap: break-word; min- height: 150px; max-width: 400px; // Aumenta el max-width overflow-x: hidden; padding: 0; // Elimina el relleno margin: 0; // Elimina el margen } Nota: Los valores de min-height y max-width son solo ejemplos. Ajusta los valores según tus requisitos específicos de diseño. Si sigues teniendo problemas, proporciona un fragmento de código reproducible (por ejemplo, un CodePen) para que podamos investigar más a fondo.

CSS Word Break y Word Wrap no funciona

4 Respuestas: