- 締切済み
文末に「…」を追加するCSSの記述について
下記は、ブラウザのサイズが変更されても2行で表示するように記述したものです。 これに文末に「…」を追加するにはどのように記述すれば良いでしょうか？ 表示結果 現在 「ああああああああ ああああああああ」 このように表示したい 「ああああああああ あああああああ…」 CSS .AAA { margin:0; padding:0px; height:2.6em; line-height:1.4em; overflow:hidden; vertical-align:top; } HTML <p class=AAA>ああああああああああああああああああああああああああああ</p>
- dyo
- お礼率1% (12/711)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- t_ohta
- ベストアンサー率38% (5061/13227)
text-overflow: ellipsis; を指定します
関連するQ&A
- HTMLとCSSの記述で表示がうまくされません
現在HTMLとCSSを使ってウェブのページを作っているのですが どうしても思ったように表示が出来ません。 HTMLの他にCSSの記述を記載致しました。 なにが出来ないかと申しますと 下記の <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> 記述部分を枠の中に入れたいのですが、どうしても外に出て表示されてしまいます。 どなたか解決方法をご存知の方はお教え頂けないでしょうか？ HTMLの記述がこちらになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <meta http-equiv="Content-Type"content="text/html;charset=shift_jis"/> <head> <title>aaaa</title> <meta http-equiv="description"content="bbbb"> <meta http-equiv="keywords"content=""> <link rel="stylesheet" type="text/css" href="index.css" media="all"> </head> <body> <p class="head"><span lang="en"></span></p> <h1></h1> <div class="img"><img src="header.gif" alt="" width="800" height="165"></div> <div class="menu"> <a href="index.html"><img src="navi_top.gif" width="195" height="35" alt="top"></a> <a href="02.html"><img src="navi_ijime.gif" width="195" height="35" alt=""></a> <a href="03.html"><img src="navi_shokuba.gif" width="195" height="35" alt=""></a> <a href="04.html"><img src="navi_plofile.gif" width="195" height="35" alt=""></a> </div> <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> <p class="text_bg"> <div class="text">text</div> </p> </body> </html> CSSの記述がこちらになっております。 body{ text-align:center; width:800px; } p{ text-align:center; font-size:0.85em; color:#333333; } p.head { font-size:0.6em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight:bold; color:#666666; text-align:left; margin-bottom:0px; } .img{ margin-top:0; margin-bottom:0; } .menu { padding-left:1px; margin-bottom:0; margin-top:0; } h1{ font-size:0.5em; display:none; } h2{ font-size:0.5em; display:none; } h2 img{ vertical-align:middle; } .mark{ margin-right:10px; } .section{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; margin-bottom:0px; margin-top:0px; background-image:url(back_01.gif); background-repeat:no-repeat; width:800px; height:165px; color:#666666; font-size:1em; } p.01{ text-align:center; font-size:1.05em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } p.text_bg{ background-image:url(back_02.jpg); background-repeat:no-repeat; margin-top:10px; width:800px; height:365px; } .text{ margin-top:10px; text-align:center; }
- ベストアンサー
- HTML
- CSSの記述でのクラスの定義で
CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか？ 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSS記述。
ようやくcssを理解してきた若輩者です。 お世話になります。 どーしても、下記のdiv要素が中央に配置できません。。。 どなたか詳しい方、正解をお願いします～～。 margin: 0 auto; で記述しても中央にならず 例えば、margin-left: 100pxとかにすると 左から100pxは動きます。 .ngg-galleryoverview { overflow: hidden; margin-top: 10px; margin:0 auto; width: 945px; clear:both; display:block !important; } .ngg-galleryoverview .desc { /* required for description */ margin:0px 10px 10px 0px; padding:5px; }
- ベストアンサー
- CSS
- safariだけCSSが崩れてしまいます
safariだけCSSが崩れてしまいます。 初心者ですが、教えて下さい。 コンテンツ部分の中に、画像(説明文付き)を横並びに３列並べて表示するためにfloatで指定してあります。 下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と３が下に落ちて崩れてしまいます。 1 2 3 4 5 6 どのようにしたら横に並んでくれるのか、わかりません。。 どうかお詳しい方、ご教授下さい。 ______________________________________ #secondary { float:left; width:705px; padding:10px 0 0 15px; margin:0; } .index .module { float:left; width:210px; margin:0 17px 0 0; padding:0 4px; text-align:left; } .galleries { background:#eee; float:left; width:100%; margin:0 0 15px; position:relative; } .gallery .galleries { float:left; position:relative; width: 720px; margin:0 0 15px; padding:0; list-style:none; padding-top:10px; line-height:1.4em; } .gallery .galleries .thumb { float:left; margin:0 10px 10px 0; } .index .galleries { margin-bottom:5px; } .galleries ul { float:left; margin-left:0; margin-bottom:0; list-style:none; text-align:left; } .galleries li { background-image:none; float:left; position:relative; width:220px; height:6.4em; overflow:hidden; margin-bottom:0; padding:75px 0 1.6em 15px; } .archive .galleries li { height:10.5em; } .galleries h3 { margin:0 10px 0 4px; font-size:100%; } .galleries h3 a, .galleries a.img, .galleries h3 a:visited { border-width:0; } .galleries .img { position:absolute; top:4px; left:15px; } .galleries .img img { display:block; } .galleries p { margin:0 10px 0 4px; } .galleries div { margin:0 4px; } .gal { background:url("../images/bg_gal.gif") 11px 0px no-repeat; margin:0; } html>body .gal { background-image:url("../images/bg_gal.png"); }
- 締切済み
- CSS
- CSSに追加した、footer記述が不完全か
footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。 どうかご教示のほどお願いします。 （例題を参考にして記述したものです。） html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px; （例題は、 left: ０; であるが、大幅に左にずれる。） bottom: 0; width: 960px; （例題は、width: 100%; であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。） height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }
- ベストアンサー
- CSS
- CSS IDごとのCLASS指定
以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか？ #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…
- ベストアンサー
- HTML
- XHTML、CSSレイアウトでフッターを常に最下部に配置するには?
フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }
- 締切済み
- ホームページ作成ソフト
- ｃｓｓでのテーブル
初心者です。 本を読みながら、スタイルシートでテーブルを作っているのですが、 左に設置したメニュー(縦に並べたボタン)のテーブルの右側に不要なスペースができ、メニューのテーブルと同じ色になってしまいます。 【内容】 .tdmenu{ vertical-align:top; background-color:#fa8072; width:140px; } p.menu{ font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; width:140px; background-color:#fa8072; height:2em } これが適応されていると思われます。 回答よろしくお願いします。
- ベストアンサー
- HTML
