I have this snippet HTML
where inside a <pre>
I print with Javascript
a 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>
What can I do so that the horizontal scroll is not generated?
Applying
white-space
equal topre-wrap
I was able to solve my problem.demonstration: