下記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ベストアンサー
- 回答日時:
>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
- 回答日時:
内容がテキストの場合は、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
- 回答日時:
[ブラウザ表示以上]、[1行目の表示以上が省略されて1行は省略されなく折り返し]
の意味がよくわかりません。
単純に[height:2em; white-space:normal;]って意味なのかもっと違う意味なのか
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スマホ表示用のwebページ、style.cssでは表の中の文字 font-size は指定できない? 1 2023/03/27 18:57
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スタイルシートで画面を上下に...
-
Ctrl+F(検索)の窓を出したいの...
-
CSSで、左側にあるGlobalNaviga...
-
スクロール可能なチェックボックス
-
2つのDIVを中央と右に横並びに...
-
textareaで入力した文字を改行...
-
HTMLですCSSです 画像のように...
-
チェックボックスの背景色って...
-
フッターの位置を一番下に表示...
-
MAX関数を使ってからLEFT JOIN...
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
アコーディオンメニューの開閉制御
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
-
HTMLで条件分岐はできますか?
-
色の変更
-
javascriptで、クリックしたら...
-
c++std::string型をTCHARに変換...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報