2行目のブラウザ表示以上を省略

質問

下記CSSで1行のブラウザ表示以上だと1行目の表示以上は省略されるが
1行は省略されなく折り返し
2行目のブラウザ表示以上を省略するにはどうしたらいいのでしょうか。

<div id="mapPos" style="height: 3em;
width: 96%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;">
あああああああああああああああああああああああああああああああああああああああ
</div>

回答No.2

ORUKA1951 · ベストアンサー

＞1行のブラウザ表示以上だと1行目の表示以上は省略されるが1行は省略されなく折り返し
2行目のブラウザ表示以上を省略するにはどうしたらいいのでしょうか。

　意味が分かりません。
　一行目とは、font-sizeや幅に関わらず、表示された時点で算出される、「擬似要素」を意味します。それに対する指定はfirst-lineですが、折り返された時点で二行目以降になります。「1行は省略されなく折り返し」の意味がありません。
「2行目のブラウザ表示以上」でなく、二つ目の段落と言う意味なら、「隣接セレクタ」になります。

<div class="abstract type1">
＿<h2>要約</h2>
＿<p>
＿＿二酸化炭素（にさんかたんそ、英: carbon dioxide）は、化学式が CO2 と表される無機化合物である。最近では、化学式から「シーオーツー」と呼ばれる事も多い。
＿</p>
＿<p>
＿＿地球上で最も代表的な炭素の酸化物であり、炭素単体や有機化合物の燃焼によって容易に生じる。気体は炭酸ガス、固体はドライアイス、水溶液は炭酸、炭酸水と呼ばれる。
＿</p>
＿<p>
＿＿多方面の産業で幅広く使われる（後述）。日本では高圧ガス保安法容器保安規則第十条により、二酸化炭素（液化炭酸ガス）の容器（ボンベ）の色は緑色と定められている。
＿</p>
</div>
<div class="abstract type2">
＿<h2>要約</h2>
＿<p>
＿＿二酸化炭素（にさんかたんそ、英: carbon dioxide）は、化学式が CO2 と表される無機化合物である。最近では、化学式から「シーオーツー」と呼ばれる事も多い。
＿</p>
＿<p>
＿＿地球上で最も代表的な炭素の酸化物であり、炭素単体や有機化合物の燃焼によって容易に生じる。気体は炭酸ガス、固体はドライアイス、水溶液は炭酸、炭酸水と呼ばれる。
＿</p>
＿<p>
＿＿多方面の産業で幅広く使われる（後述）。日本では高圧ガス保安法容器保安規則第十条により、二酸化炭素（液化炭酸ガス）の容器（ボンベ）の色は緑色と定められている。
＿</p>
</div>

として、
p{text-indent:1em;margin:0 1em;}
div.abstract{margin:0 10%;line-height:1.6em;}
div.abstract p{position:relative;}
div.abstract p+p{display:none;}
div.abstract.type1 p{height:1.6em;overflow:hidden;}
div.abstract p:after{color:red;}
div.abstract.type1 p:after{content:"・・(以下略)・・";position:absolute;right:0;top:0;background-color:white;}
div.abstract.type2 p:after{content:"\A・・(以下略)・・";white-space:pre;}

type1は一行目のみ表示
type2は一つ目のみ段落の未表示

回答No.3

神崎 渉瑠（@taloo）

内容がテキストの場合は、font-size、height、line-heightをセットにして考えないと、
height:2emが2行分になったり、height:3emが2行分になったりと不定です。

line-height: 1.2em;
height: 2.4em; /* 通常はline-heightの2倍 */
white-space: nowrap;
-webkit-text-overflow: elipsis;
-o-text-overflow: elipsis;
-ms-text-overflow: elipsis;
text-overflow: elipsis;
overflow: hidden;

回答No.1

axuaxua

[ブラウザ表示以上]、[1行目の表示以上が省略されて1行は省略されなく折り返し]
の意味がよくわかりません。
単純に[height:2em; white-space:normal;]って意味なのかもっと違う意味なのか