1

プロローグ

次のようなレイアウトがあります。 ここに画像の説明を入力

ここは「JSFiddle」にあります。

すべての DIV は次のようになり、テキスト行の下に表示されます。

<div class="container">
    <div>
        <span class="offset" style="width: 150px">&nbsp;</span>
        <span class="myText">First: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </div>
    <div>
        <span class="offset" style="width: 500px">&nbsp;</span>
        <span class="myText">Second: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </div>
    <div>
        <span class="offset" style="width: 50px">&nbsp;</span>
        <span class="myText">Third: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </div>
    <div>
        <span class="offset" style="width: 233px">&nbsp;</span>
        <span class="myText">Fourth: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
   </div>
</div>

考え

読み取りエラー スパンを使用して、上記のテキストのエラーを強調表示します。エラー範囲は、エラーが発生したテキスト内の文字位置を左上隅が指すように配置されます。ここでは、実際のエラー スパン (赤) の前にスパン (黄色) を使用して、エラー スパンを正しい量だけ右に移動します。（これは良い方法ではありません。興味がある場合に備えて、以下で理由を説明します。私は推奨事項を受け入れていますが、それは現在の問題ではありません）

このようにして、左から特定の位置でスパンを開始することができましたが、十分なスペースがない場合はラップアラウンドし、行の先頭で継続します. (オフセットのために) 1 ワードでも十分なスペースがない場合、スパン全体が次の行に移動します。これは私が望む動作です。

問題

右側にスペースがないためにスパンが完全に次の行に移動すると、左上の「尖った」コーナーは正しくなくなります。その場合、スパンの角を丸くしたいと思います。しかし、私はそれを行う方法を見つけることができませんでした。Javascript/jquery の使用は避けたいと思います。これは、面倒な計算が多く、含まれているウィンドウまたは div のサイズが変更されるたびに再計算する必要があるためです。

これまでに試した

私は主に CSS 疑似要素を調べました:first-line。しかし、仕様では、:first-line要素はセレクターのリストの最後のセレクターでなければならないと述べています。試してみたら確かに

div:first-line .myText {
    # apply some layout
}

動作しません。

どちらでもない

.myText:first-line {
    # apply some layout
}

:first-line要素は、ブロック コンテナ要素にしか接続できないためです。

.myText をinline-block要素にすればうまくいきますが、それにより早期に折り返されます (最初の行に完全に収まらない場合)。display:block早期ラッピングを悪化させるだけです (次の行から直接開始します)。

そして、私はそれdiv:first-line以来、選択することはできません

  1. :first-line ボーダーを設定することはできません。
  2. 変更したとしても、:first-line ブロック要素の周囲の境界線が変更されますが、その内部のスパンの境界線は変更されません。

スパンがdivの2行目にある場合、スパンが次の行に完全に移動したかどうかを調べて登録する多くのJavascriptコードを書かずに、スパンの左上隅を丸くする方法リスナーのサイズを変更して毎回再計算しますか?

margin-left:200pxまたはの代わりにオフセット スパンを使用するposition:relative; left:200px理由

どちらもコンテナ div を大きくする原因となりましたが、それはできません。このレイアウトは、JSFiddle のプレビューと同様に、スクロール ビューに埋め込まれています。.offsetスパンを に設定しdisplay:none、.myTextスパンのマージン左を何か大きな値 (500px など) に設定してから、すべての行が次の行に折り返されるまで JSFiddle プレビューのサイズを変更します (スパンの最初の単語を除く)。最初の単語は常に最初の行にあるため、コンテナの div がそれ以外の場合よりも大きくなります。私の場合、コンテナ div のサイズが変更されないため、テキストが途切れます。

したがって、カスタム幅 (エラーの位置に応じて Javascript/jquery によって決定される) を使用して、前に別のスパンを使用します。このようにして、最初の行に十分なスペースがない場合、完全なスパンを次の行に折り返すことができます (その場合、「2 番目」で始まるスパンでわかるように、行の先頭から始まります)。

環境

これは Adob​​e Bracketsの拡張用です。内部の CodeMirror エディターの addLineWidget() メソッドを使用して、div にエラー メッセージを挿入しています。したがって、Brackets/CodeMirror API を使用して問題を解決するものは何でも問題ありません。

4

0 に答える 0