Tengo una cadena, que estoy mostrando en un lapso.
<div> <span>The name of this person is john He is a cricket player </span> </div>aquí está tomando el ancho a partir del texto. Ahora, no quiero darle ningún ancho específico a este elemento. así que lo intenté
.parent{ display: inline-block // so that the div should take only that width as of the text } .childspan { //word-wrap: break-all; } Entonces, ¿cómo divido el lapso en dos líneas usando CSS después de que la palabra específica is ?
¿Hay alguna manera de hacer esto? sin dar el ancho fijo?
Puede usar 2 elementos de span y agregar un <br> en el medio:
<div> <span>The name of this person is john He is</span> <br> <span>a cricket player </span> </div> O, alternativamente, use la ::after :
<div> <span id="line1">The name of this person is john He is</span> <span>a cricket player </span> </div> <style> #line1::after{ content: "\a"; white-space: pre; } </style>Lo más fácil con js sería
const child = document.querySelector('.parent .child'); child.innerHTML = child.innerHTML.replace("is", "is<br/>");y se puede usar en cualquier elemento para romper después de la palabra, también si necesita romper después de cada es, entonces úselo con RegExp
child.innerHTML = child.innerHTML.replace(/is/g, "is<br/>");Puedes usar la etiqueta <br> , donde quieres romper una línea.