質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3940閲覧

画像の上に乗せた文字が勝手に改行してしまう

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/03 14:32

画像の上に乗せた文字が勝手に改行してしまいます。
今、画像の上に乗せた文字が

こんばんは!今日は何回 笑いましたか? 挨拶は大事にしましょう 寝る前にその日のことを振り返りま しょう リラックスして次の日を迎えましょ う

のように改行されています。
理想のアウトプットは、

こんばんは!今日は何回笑いましたか? 挨拶は大事にしましょう 寝る前にその日のことを振り返りましょう リラックスして次の日を迎えましょう

のようにすることです。
htmlには

<div class="detailimg"> <img src="{% static 'detail.jpg' %}" alt="詳細"> <h2>こんばんは!今日は何回笑いましたか?<br>挨拶は大事にしましょう</h2> <h3>寝る前にその日のことを振り返りましょう<br>リラックスして次の日を迎えましょう</h3> </div>

と書きcssには

.detailimg{ float: left; position: relative; padding-top:30px; padding-left:80px; padding-right:80px; } .detailimg h2{ position: absolute; font-family :Quicksand, sans-serif; top: 40%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; } .detailimg h3{ position: absolute; font-family :Quicksand, sans-serif; top: 70%; left: 50%; -ms-transform: translate(-70%,-70%); -webkit-transform: translate(-70%,-70%); transform: translate(-50%,-50%); margin:0; padding:0; }

と書きました。
-ms-transform: translate ・-webkit-transform: translate ・ transform: translate の値をそれぞれ色々と大きくしたり小さくしたりしていじっても、変なところで改行されるのが直りません。
新しい属性をdetailimg h2とdetailimg h3に追加すべきなのでしょうか?どうしたら目的のアウトプットになりますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

うまくいくかちょっと不安ですけど。。↓

css

1* { 2 white-space: nowrap; 3}

はどうでしょうか?

自動改行を防ぐ(勝手に改行させない)CSSの書き方

投稿2017/10/03 15:32

namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問