Estoy tratando de crear texto que se ajuste a la siguiente línea cuando se desborde. Actualmente, cuando se desborda, crea una línea completamente nueva y coloca el texto en esa línea. Lo que me gustaría es que el texto llene la primera línea y luego se ajuste a una nueva línea.

Código:

<div>
    <p style="width: 15em; display: inline-block;">[100 bytes] Input Script:</p>
    <p style="display: inline-block; overflow-x: auto;">
        <span style="overflow-x: auto;">
            034840082CFABE6D6DFF54D028353549F5600B28A1757828F1B0E9ECCC0322435BA6D8CA1D76442A6A08000000F09F909F00144D696E65642062792072656E6A69616E66656E670000000000000000000000000000000000000000000000000000000000
        </span>
    </p>
</div>

También he intentado configurar el texto a los diferentes valores word-wrap sin resultado. Esto probablemente ha sido respondido millones de veces, pero no puedo encontrar una solución que funcione en esta situación.

Cualquier ayuda es apreciada, gracias!

0
kpjVideo 10 sep. 2018 a las 05:55

3 respuestas

La mejor respuesta

Desea la propiedad de salto de palabra:

span {
  word-break: break-all;
}
<div>
  <p style="width: 15em; display: inline-block;">[100 bytes] Input Script:</p>
  <p style="display: inline-block; overflow-x: auto;">
    <span style="overflow-x: auto;">
            034840082CFABE6D6DFF54D028353549F5600B28A1757828F1B0E9ECCC0322435BA6D8CA1D76442A6A08000000F09F909F00144D696E65642062792072656E6A69616E66656E670000000000000000000000000000000000000000000000000000000000
        </span>
  </p>
</div>
3
j08691 10 sep. 2018 a las 02:58

Pruebe el código a continuación y vea si funciona para usted.

<div style=" display: -webkit-box;word-wrap:break-word;">
    <p>[100 bytes] Input Script:</p>
    <p style=overflow-x: auto;">
        <span style="overflow-x: auto;">
vdnbvhbsdh vbjsf dbvbdjfbsa ddddddddd ddKVZHSDBVkjsdvbJ HVBDHBSDHJV BSHDVBDHVSJBDJHm dsjzhvjhmdvjmhbsjfhvvlnbsfdhbzv skjhbvhjkzsbvhjzsdbvhb zvkhfnkhfnkjnfkbjndfkjbnkjnbzkjnbkjfdnbkjdnkjb
    </p>
</div>
2
Neeraj Kamat 10 sep. 2018 a las 05:21

Establezca word-break: break-all; en su <p>

http://jsfiddle.net/rfo7ut2a/2/

2
imjared 10 sep. 2018 a las 02:57