タグ・デザイン掲示板

[

タイトルの途中で改行しないためには
by はる

2016-01-15 23:57
タグに詳しい皆さんにお聞きしたいことがあります。

小説機能を使っており、表紙ページでタイトルを横並びに表示しています。
例) aaaaa / bbbbb / ccccc /

これが、タイトルの途中で改行されてしまい、
例) aaaaa / bb
　 bbb / ccccc
となるのを避けたいのですが、なにかいいやり方はありますでしょうか。

ちなみに、
HEAD・HTML詳細に
<style type="text/css">
を追加し、小説ページの「一覧表示でのタイトルの左」に<span>、右に</span><wbr>
と直接書き込んでみました。
Androidではうまくいったのですが、PCでは逆に一切改行されないようになってしまいました。

アドバイスをお持ちの方がいらっしゃいましたらよろしくお願いします。

pc
[編集]

by 9

2016-01-16 11:17
span {
white-space: nowrap;
display:inline-block;
}

<wbr>は使わない

外部で調べてみたら上記の方法が見つかりました。

タイトルがリンクの場合、
<div class="クラス名">#list#</div>

.クラス名 a{
display:inline-block;
}
だけで出来そうな気もします。
(クラス名は半角英数字にする　最初の文字は英字)

pc
[編集]

by はる

2016-01-16 15:28
9さん、ありがとうございます！

教えていただいた方法の1つ目で見事上手くいきました。

しかし2つ目の方法の方が効率が良く、こちらが使えれば素晴らしいと思って試してみたのですが、横並びになってくれません。

HEAD内に
.h1 a{
display: inline-block;
}

レイアウトには
<div style="margin-left:auto;margin-right:auto;max-width:550px;"><div style="line-height:2.5"><div class="h1"><span style="border-bottom:dotted 2.5px #009999;">#list#</div></span>
と書いているのですが、ご面倒でなければどなたでも、間違いをご指摘いただけますか。

pc
[編集]

by 9

2016-01-16 16:38
終了タグがなかったり順番が違っていたりしたので、まとめてみました。

body{
text-align:center;
}

.h1{
margin-left:auto;
margin-right:auto;
max-width:550px;
line-height:2.5;
}

.h1 a{
display: inline-block;
text-decoration:none;
border-bottom:dotted 2.5px #009999;
}

レイアウト
<div class="h1">#list#</div>

border-bottom:dotted 2.5px #009999;がどこに付けたいのかちょっと分からなかったのでリンクの下線にしていますが、divのボックスの下線にしたい場合は.h1{ }の中へ入れてください。

pc
[編集]

by はる

2016-01-16 16:54
なるほど、こんなにすっきりと書けたんですね。不勉強でお恥ずかしい…

きちんと思い通りのページになりました！9さん、ありがとうございます。

pc
[編集]

[