cssで長い文章を非表示にする際に謎のmarginが発生します。

ご質問させていただきます。

リスト形式でブログのランキングの様に表示し、長いタイトルの時は3行目以上は非表示するように設定しています。
そこでIEには対応していませんが

display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;

を使い表示してみたところ、確かに3行目以降は三点リーダーで表示されるのですが
余分なmargin-topが発生してしまい無駄な空白ができてしまいます。

<ul>が悪いのか、<li>が悪いのか一つ一つ調べていた所、非表示にするための ``` display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; ```

が悪さをしていたみたいです。こちらを外せば、余分なmargin-topが入らずちゃんとした表示ができるのですが、どうしても長いタイトル
の場合もありますので、謎のmargin-topを無くしたいです。
上記のwebkitはマージンが入る等何かあったのでしょうか?
わかる方がいましたら、教えてください。よろしくお願いします。

以下が実際に記述したHTMLとcssです。

↓HTML↓

<div class="box">
	<ul class="A-list">
	<li><div class="A-list-title">テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章</div>
	</li>
	</ul>
</div>

↓css↓


.box{
	width:100%;
	height:350px;
	}
	
.A-list {	
		width:100%;
		margin:0;
		padding:0;
		height:360px;
		}

.A-list li {
		width:100%;
		height:auto;
		}

.A-list-title {
		margin:0;
		padding:0;
		font-size:14px;	
		overflow:hidden;
		display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
		}

行動規範の内容に同意します

回答2件

ベストアンサー

頂いたコードを試すと、確かに余白が発生していました。

html
1<body>
2<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲ</p>
3<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲ</p>
4</body>

css
1p {
2	overflow: hidden;
3	text-overflow: ellipsis;
4	white-space: nowrap;
5}

ただ単純に、3行で三点リーダをテストすると、余白は発生しませんでした。
ということは、HTML側に問題があると考えられます。

<li>要素の高さは上のスクショの通りで、

<div>要素の高さは上のスクショの通りでした。

<div>要素は正しく3行で省略でき、高さも意図する高さになっているので、
<li>側に問題があるのでは、と考えられます。

<li>はブラウザのデフォルトのlist-itemがかかっているのですが、
これをblockにすることで、余白は解消できました。

追記

先に回答された yuki84web さんも仰っていますが、

liをblockにすれば中にdivを作る必要も無い気がします。

上記の通りかと思います。

投稿2015/11/23 01:34

編集2015/11/23 01:39

ikki57

総合スコア290

SaekoIwaki

2015/11/23 05:52

わざわざSCまでしていただきありがとうございます。仰るとおり、liの方にdisplay: block;を記述した所marginの回避ができました。ありがとうございました。今回の問題はdisplayを指定しなかったため、デフォルトのlist-itemが付与されたからということでしょうか? list-itemd自体にmarginはないようですが、どうしてmarginができたかわかりますでしょうか?

行動規範の内容に同意します

css
1.A-list li {
2        display: block;
3        width:100%;
4        height:auto;
5        margin:0;
6        padding:0;
7        font-size:14px;    
8        overflow:hidden;
9        display: -webkit-box;
10        -webkit-box-orient:vertical;
11        -webkit-line-clamp:3;
12        }
13
14.A-list-title {
15        /*margin:0;
16        padding:0;
17        font-size:14px;    
18        overflow:hidden;
19        display: -webkit-box;
20        -webkit-box-orient:vertical;
21        -webkit-line-clamp:3;*/
22}