Tengo un texto preformateado generado y trato de darle estilo sin usar ningún resaltador de sintaxis y usando un JavaScript simple. Pero se rompe en el modo de respuesta.
Si marca el .code-inner contiene un ancho del 80% pero aún así adquiere el ancho completo. ¿Es algo que se desborda con overflow: auto; o agregué algún código que parece estar equivocado.
function preformatted() { var pre = document.getElementsByTagName('pre'), pl = pre.length; if(jQuery(pre).find('.line-number').length){ return; } for (var i = 0; i < pl; i++) { pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>'; var num = pre[i].innerHTML.split(/\n/).length; for (var j = 0; j < num; j++) { var line_num = pre[i].getElementsByTagName('span')[0]; line_num.innerHTML += '<span>' + (j + 1) + '</span>'; } } } preformatted(); .code-inner { position: relative; width: 80%; } pre { overflow:auto; margin:0 0 1em; padding:.5em 2em; white-space: pre-line; } .code-wrap { background: linear-gradient(to right, #264567 60px, #73b9ff 0% 80%); width: 100%; height: 200px; padding: 20px 10px; border-radius: 5px; box-shadow: 0 0 18px -7px #000; overflow-y: scroll; } pre code, pre .line-number { font:normal normal 16px/14px Lato, "Courier New",Courier,Monospace; color:black; display:block; line-height: 30px; } pre .line-number { float:left; margin:0 1em 0 -1em; text-align:right; color:#fff; } pre .line-number span { display:block; padding:0 .5em 0 1em; } pre .cl { display:block; clear:both; } /* Vertical Scroll */ .code-wrap::-webkit-scrollbar { width: 4px; } /* Track */ .code-wrap::-webkit-scrollbar-track { border-radius: 10px; margin: 10px; } /* Handle */ .code-wrap::-webkit-scrollbar-thumb { background: #fff; border-right: 4px #555555 solid; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="code-inner"> <div class="code-wrap"> <pre> <code> ° Vivamus feugiat quam sed ipsum varius aliquam. ° In ac augue eu leo dignissim cursus hendrerit sed nulla. ° Sed dapibus justo id lectus rhoncus pulvinar. ° Aliquam sit amet enim ut nisl gravida lobortis. ° Nunc a sapien non lorem mollis viverra. ° Donec feugiat nunc quis condimentum feugiat. </code> </pre> </div> </div>¿Qué estoy haciendo mal?