Ограничение ширины текста внутри блока в CSS

#html #css

#HTML #css

Вопрос:

У меня есть веб-сайт со следующей настройкой:

 .container {
    margin: 0 auto;
    max-width: 960px;
}

.containerInner {
    border: 1px solid #D0D0D0;
    margin: 0 20px;
    box-shadow: 0 0 8px #D0D0D0;
    -webkit-box-shadow: 0 0 8px #D0D0D0;
}

div.body {
    margin: 0 30px 30px 30px;
}

h2 {
    color: #444444;
    background-color: transparent;
    margin: 0 0 15px 0;
    padding: 10px 15px 8px 15px;
    font-family: "HelveticaLight", sans-serif;
    font-weight: 100;
    font-size: 30px;
    line-height: 32px;
    padding: 15px;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #D0D0D0;
}

code {
    font-family: Consolas, Monaco, Courier New, Courier, monospace;
    font-size: 13px;
    color: #3365A2;
    background-color: #f9f9f9;
    border: 1px solid #D0D0D0;
    display: block;
    margin: 14px 0 14px 0;
    padding: 6px 10px 6px 10px;
}

 <div id="container" class="container">
  <div id="Demo" class="containerInner">
    <h2>Demo</h2>
    <div class="body">
<pre><code>stuff {
  this is a very very very very very very very very loooooooooooooooong line of code or possibly something other than code but that still needs to be in a code tag
}</code></pre>
    </div>
  </div>
</div>

Проблема здесь в том, что строки, подобные этой, <code> могут выходить за пределы их блока кода и их контейнера, что также приводит к расширению веб-страницы и созданию горизонтальной полосы прокрутки для всей страницы, чего я не хочу. Я бы хотел, чтобы вместо этого (в порядке предпочтения) либо:

иметь прокручиваемый блок кода (очень похожий на те, что здесь, на SO); или
автоматически переносить текст каким-либо разумным образом; или
просто отрежьте (т. Е. Прекратите отображение) текст в конце блока кода (однако он все равно должен быть доступен для копирования полностью).

Как бы мне обойти одно из 3 решений, если это возможно, без чрезмерного написания сценариев?

Ответ №1:

Просто добавьте style="overflow: scroll;" в блок кода. В качестве альтернативы вы можете добавить style="overflow: auto;" , который создаст полосу прокрутки только в случае переполнения содержимого.

(Примечание: вы также можете добавить его в часть CSS, но я сделал его встроенным, просто чтобы выделить, где он находится.)

 .container {
    margin: 0 auto;
    max-width: 960px;
}

.containerInner {
    border: 1px solid #D0D0D0;
    margin: 0 20px;
    box-shadow: 0 0 8px #D0D0D0;
    -webkit-box-shadow: 0 0 8px #D0D0D0;
}

div.body {
    margin: 0 30px 30px 30px;
}

h2 {
    color: #444444;
    background-color: transparent;
    margin: 0 0 15px 0;
    padding: 10px 15px 8px 15px;
    font-family: "HelveticaLight", sans-serif;
    font-weight: 100;
    font-size: 30px;
    line-height: 32px;
    padding: 15px;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #D0D0D0;
}

code {
    font-family: Consolas, Monaco, Courier New, Courier, monospace;
    font-size: 13px;
    color: #3365A2;
    background-color: #f9f9f9;
    border: 1px solid #D0D0D0;
    display: block;
    margin: 14px 0 14px 0;
    padding: 6px 10px 6px 10px;
}

 <div id="container" class="container">
  <div id="Demo" class="containerInner">
    <h2>Demo</h2>
    <div class="body">
<pre><code style="overflow: scroll;">stuff {
  this is a very very very very very very very very loooooooooooooooong line of code or possibly something other than code but that still needs to be in a code tag
}</code></pre>
    </div>
  </div>
</div>