cssの改行！！！！！！！！！

質問

.tarminal{
margin: 18px;
margin-right:20%;
padding: 7px;
border: 1px red dotted;
background: black;
color: #AAA;
font-size: 8px;
letter-spacing: 0.12em;
line-height: 1.96;
}
左から右への普通のテキストの話です。アラビア語ではないです。
これのボックスの右端で改行させたいです。
普通に書くと
"/Boryumushadoukopi-/makkubukku/2013-08-18-000119"
"/Boryumushadoukopi-/makkubukku/2013-08-25-124532"
"/Boryumushadoukopi-/makkubukku/2013-09-01-001555"
"/Boryumushadoukopi-/makkubukku/2013-09-16-013322"
のようにきりに良いところで改行されてしまいます。
しかし、右側部分に余白が大きくできてしまいますので、
"/Boryumushadoukopi-/makkubukku/2013-08-18-000119" "/Boryumu
shadoukopi-/makkubukku/2013-08-25-124532" "/Boryumushadoukopi
-/makkubukku/2013-09-01-001555" "/Boryumushadoukopi-/makkubu
kku/2013-09-16-013322"
のよにワードラップを無視した見た目にしたいです。
" "ここを<span white-space: nowrap; >" "</span>みたいなので囲むとまた別のところで改行がでてしまいます。
手動で改行を入れる方法も考えたのですが、ブラウザごとにフォントが違ったりするとボックスからはみ出たりしそうで怖いです。

素敵な方法を教えてね☆

回答No.2

kobliha · ベストアンサー

http://www.htmq.com/css3/word-break.shtml

break-all を使えば、「どこでも改行」になる。

回答No.1

ponsukez

HTML内にコードを記述する際は、

<pre><code>コード
コード
</code></pre>

とするのが一般的なようです。

CSSとして

pre{
width:95%;/* 適当な横幅を指定 */
overflow-y:auto;/* 横にはみ出したらスクロールを表示 */
border:1px solid #ccc;
white-space:pre;
/*後はマージンやパディングとボーダーを使いボックスを表現し見栄えを整えるとよろしいかと */
}

pre code{
display:block;/* ブロック化 */
}

preを使うとHTML内で書いた通りの場所で改行されます。

CSSの改行を使うのもいいですけど<wbr>←改行可能ならば改行、を使う方法もあるようです。

補足

うーん、改行を意図的に入れたいっていうわけじゃないんです。
勝手に右端で改行してほしいんです。
しかも、ワードラップを無視して！