Немає горизонтальної смужки прокручування для кодів призми з початковою завантаженням 3 - html, css, twitter-bootstrap

я використовую призми для виділення коду в моєму веб-додатку, алегоризонтальна смуга прокрутки у полі призми для довгих рядків коду ніколи не вмикається. Це тому, що я також використовую twitter bootstrap 3 (добре працює, якщо я видаляю css bootstrap), але я не можу зрозуміти, як це виправити для роботи з завантажувальним пристроєм.

Ось код:

<table id="views" class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Map</th>
<th>Reduce</th>
<th>Emit mapping</th>
<th>Collections</th>
</tr>
</thead>
<tbody>
{% for view in views.views %}
<tr>
<td><a href="{{ url_for("view.get_view", name=view.name) }}">{{ view.name }}</a></td>
<td><pre><code class="language-python">{{ view.map }}</code></pre></td>
<td>{{ view.reduce }}</td>
<td>{{ view.emit_mapping }}</td>
<td>{{ view.collections }}</td>
</tr>
{% endfor %}
</tbody>
</table>

Код, характерний для призми, є наступним рядком:

<pre><code class="language-python">{{ view.map }}</code></pre>

Як я можу отримати горизонтальну смугу прокрутки? Встановлення фіксованої ширини попереднього елемента в css не вирішує проблему.

jsfiddle, що відтворює проблему.

Дякую,

Відповіді:

Я виправив це за допомогою наступного коду css:

pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}

А потім я просто поклав код у такий контейнер:

<td><div class="container"><pre><code class="language-python">{{ view.map }}</code></pre></div></td>

Проблема полягала в тому, що завантажувальний засіб за замовчуванням переосмислює пробіл та перенесення слів.