dポイントプレゼントキャンペーン実施中！

タグ前後で自動改行されない

解決済

  • 質問者：kyoroemon
  • 質問日時：
  • 回答数：2件

<p>……あいうえお<em>かきくけこ</em>さしすせそ……</p>

文章の自動改行のことで質問です。
ブラウザのすみをつまんで、いろいろな横幅での見え方を確認しています。
インライン要素のタグ前後のところでちょうど改行させたくて、できないでいます。

…………………………あいうえお
かきくけこさしすせそ…………

のように、ちょうどインライン要素のタグがあるところで改行するようにしたいのですが、そうならずに

……………………………あいうえ
おかきくけこさしすせそ……

のようになってしまいます。
解決できる方、どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　説明が解り難かったかな・・これは日本語と言う単語境界のない言語の特性です。

私たちが普段見る新聞記事や教科書でも強調フレーズであっても、行末で折り返されることがありますね。英文では単語の途中で折り返すことは禁じられていますから、その単語フレーズ要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )に対しの処理が変わってしまうのです。
　前後に半角スペースをとって英文を記述して半角スペースを(折り返し禁止の空白単語境界)を書けば折り返されません!!!しかし日本語では他の場所で折り返されてしまいます。

　そこで折り返したくない要素についてはスタイルシートでwhite-spaceを指定します。下記にHTML4.01のサンプルを挙げておきますので、説明とソースを良く見比べて理解してください。なお、white-space処理は、外部スタイルシートやhead内ではなく、特定の要素一つ一つにstyle属性で指定してください。長いフレーズ要素の場合に日本語では、不都合が生じます。

★タブは＿に置換してあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
em{color:red;white-space:nowrap;}
strong{color:green;}
p{line-height:1.6em;margin:0;text-indent:1em;}
p[lang|="en"]{line-height:1.2em;margin:1.33em 0;line-height: 1.12em;color:blue;text-indent:0;}
p[lang|="en"]:first-letter{float:left;font-size:2em;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページではフレーズ要素の折り返しについて説明しています。</p>
＿</div>
＿<div class="section">
＿＿<h2>原文</h2>
＿＿<p lang="en-us">The presentation of phrase elements depends on the user agent. Generally, <em>visual</em> user agents present <strong>EMtext in italics and STRONG text in bold font</strong>. <em>Speech synthesizer</em> user agents may change the synthesis parameters, such as volume, pitch and rate accordingly.</p>
＿＿<h2>邦訳</h2>
＿＿<p>フレーズ要素のプレゼンテーションは、ユーザエージェントに依存する。 概して、<em>視覚系</em>ユーザエージェントは<strong>EMテキストをイタリックで、またSTRONGテキストをボールドなフォント</strong>でプレゼンテーションする。 <em>音声合成</em>のユーザエージェントは、音量、ピッチ、速度等の合成パラメータを、適宜変えるであろう。 </p>
＿＿<p>
＿＿＿この段落の強調文字は、「<strong style="white-space:nowrap">ここでは改行しません</strong>が、<strong>ここでは改行します。</strong>」のように、日本語のフレーズに関してはスタイルシートでwhite-spaceの処理を指定する必要があります。
＿＿</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-10-06</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

………………………「ここでは改行しませんが、
ここでは改行します。」のように、………

この部分で改行されることはないということで理解しました。

文章の見栄えをよくしたく質問させていただきました。
どうもありがとうございます。

通報する
お礼日時：2012/10/07 13:21

No.1

  • 回答者： ORUKA1951
  • 回答日時：

　基本的に、できません。

するべきではありません。なぜなら日本語ですから、英語など単語境界のある言語は、単語の内部での改行が禁止されますが、日本語の場合はそれはなじみませんのでありません。
　たとえば<q>この部分は、引用文ですがすこし長いです。なんたらかんたら・・・</q>が改行禁止だったらまずいでしょう。
7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　スタイルシートでem{display:inline-block;}とすると改行を制御できますが、好ましい方法ではありません。なぜならemは強調を示すマークアップですから。

この回答への補足

<em>かきくけこ</em>の途中では、自動で改行できています。
…………………あいうえおかき
くけこさしすせそ…………

ちょうど<em>か</em>のある場所での改行ができません。
………………………あいうえお
かきくけこさしすせそ……
…………あいうえおかきくけこ
さしすせそ…………………

補足日時：2012/10/06 12:49
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報