- ベストアンサー
このようなCSS指定はできますか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> div{ width:150px; background:#F4DBDC; } div>span{ white-space:nowrap; } div>span:nth-of-type(n+2)::before{ content: ""; display: block; } </style> </head> <body> <div> <span>あああああ</span><span>いいいいい</span><span>ううううう</span><span>えええええ</span> </div> </body>
その他の回答 (1)
- muuming2001
- ベストアンサー率23% (202/845)
追伸 普通はpなりdivなりで囲んで最初からブロック要素になるようにするような気がする・・・ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> div{ width:150px; background:#F4DBDC; } </style> </head> <body> <div> <p>あああああ</p><p>いいいいい</p><p>ううううう</p><p>えええええ</p> </div> </body>
お礼
ありがとうございました！
関連するQ&A
- span要素にのみwhite-space: nowrapを指定したい
CSSによる改行指定が思う様にできなくて困っています。 幅400pxのボックスの中で、<span>～</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。 スタイルシートに div{width:400px;} span{white-space: nowrap;} HTMLに <div> <span>type1</span><span>type2</span><span>type3</span>... </div> のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。 どのように指定すれば目指している形にできるでしょうか？
- ベストアンサー
- HTML
- テーブル内のハイフンで改行させない方法（CSS）
いつもお世話になっております。 blue-horseと申します。 テーブル内の文字列に半角ハイフンがあるのですが、 そこで強制的に改行されてしまいます。 これを回避する方法として以下の方法を試しました。 環境： OS:WindowsXP Professional SP2 ブラウザ：Internet Explorer 6.0 １）CSS white-space:nowrap; -> × ２）実態参照 - -> × ３）実態参照 -> × ４）<pre>タグ -> 成功(※) ５）<nobr>タグ -> 成功 <pre>タグは改行は抑制できたのですが、フォントサイズが指定と変わってしまいました。 <nobr>タグが最も要求に近いのですが、HTMLが見難くなります。 出来ればCSSで解決したいのですが、手段はありませんでしょうか。
- 締切済み
- HTML
- セルのサイズ指定が反映されないのですが・・・
テーブルを使用したページを作成していたのですが、 そのテーブル内に、２つの画像とその間に文字を入れるセルを作った所、 セルの横幅にはまだ余裕があるにもかかわらず、途中で改行が入ってしまいました。 ＿＿＿＿＿＿＿＿＿＿＿ │●あい │ │ │う● │￣￣￣￣│ ￣￣￣￣￣￣￣￣￣￣￣ 構成として、改行を入れたくなかったので、<style>でnowrapを指定した所 セルの横幅が広くなり、無駄な余白ができてしまいました。それをなくしたくて HTMLやCSSでセルのサイズを指定したのですが、なぜかサイズが変化しません。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ │●あいう● │ │ │ │￣￣￣￣ │ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ なぜそうなるのか、ご存知の方、教えて頂ければ嬉しいです。 よろしくお願いします。
- 締切済み
- HTML
- width指定したTDでwhite-space:nowrapが効かない
width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6～8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>
- ベストアンサー
- HTML
- CSSでボックス幅を文字列に合わせたい
ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。 テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。
- ベストアンサー
- HTML
- CSSのwhite-spaceプロパティについて
CSSのwhite-spaceプロパティの意味がわかりません。まず、「半角空白、改行、タブ...msmssatさん CSSのwhite-spaceプロパティの意味がわかりません。まず、「半角空白、改行、タブ」という言葉が出てきますが「タブ」とはなんなのかがわかりません。 そしてwhite-spaceプロパティには、normal,pre,nowrapと３つの値があるようですが、その違いが何なのかがわかりません。 ネット上で調べたのですが、どのような違いがあるのかがわからないのです。 CSS初心者です。 是非、お知恵を頂きたいと思っております。わかりやすくご説明をお願いします。 なお、Webクリエイター上級試験の勉強を独学でしております。 そのために、ご協力ください。 大変恐縮ですが、よろしくお願いいたします。
- ベストアンサー
- CSS
- cssを使った枠線の表示について
css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか？ (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか？ (3)文字列と枠線との間隔を調整することは可能でしょうか？ 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 「white-space: nowrap;」
androidのスマホでCSSの「white-space: nowrap;」が効かなく文字が横に広がります。 どのようにすれば画面内に収まるのでしょうか？
- ベストアンサー
- CSS
- CSSで言語アイコンを指定
サイト右上に国旗画像を置き、それをクリックすると言語の切り替えができるようにするサイトを造ろうとしています。 HTMLで <ul><li><a href="#"><img src="img/gb.gif"></a></li><li><a href="#"><img src="img/fr.gif"></a></li></ul> と指定すると、HTMLファイルのディレクトリが変わると、画像の場所を指定しなければなりません。 これがわずらわしいので、CSSで画像を背景とし、文字列をスペースにすることで画像指定を一括できるようになりました。しかし、画像のサイズと、文字列のサイズをぴったりにできません。どうしたらよろしいでしょうか？
- ベストアンサー
- CSS
- 指定した単語のフォントをすべて自動的に指定することはできますか？
cssを使ってＨＰを制作しています。 文中、何度も繰り返し、ある単語が出てきます。 コレ以外はすべてｃssで操作していますが、これだけは <span style="color:red"><strong>なになに</strong></span>という形にしていますが、数が数だけに大変です。 なにかもっと方法があるはずだと思うのですが・・・ ページ内にある1つの単語を、すべて自動的にフォント指定する方法はありますか？ あるいは、私の方法よりもマシなやり方と言うのはあるでしょうか？ よろしくお願いします。
- ベストアンサー
- ブログ
お礼
ありがとうございました！