Tengo este fragmento HTML
donde dentro de un <pre>
imprimo con Javascript
un JSON
.
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
overflow: auto;
}
<pre>{
"info": {
"lines": {
"1": {
"code": "1",
"quantity": 1,
"price": 2.1,
"title": "Item 1",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec risus in lacus commodo feugiat sit amet eget nibh. Phasellus in est at lectus varius blandit. Curabitur ut pellentesque libero, eget pulvinar nisi. Cras massa dui, congue vitae enim eget, mattis feugiat mi. Duis id dolor et turpis molestie mollis varius ac ipsum. Suspendisse rutrum neque in sagittis sodales. Sed enim leo, aliquet eget luctus nec, blandit ac sem.",
"weight": 5,
"cost": 0.7
}
}
}
}</pre>
¿Que puedo hacer para que no se genere el scroll horizontal?