5

これは読むべきことがたくさんありますが、すべてを読んだら意味があるはずです。

ユーザーが iOS でテキストを強調表示する必要があるアプリに取り組んでいます。テキストは改行と段落区切りで段落に分割されています。改行には<br />タグを使用し、p段落ごとに新しい要素を開始することにしました。Mobile Safari の問題は、選択している要素がインラインでない場合、文字を個別に選択できないことです。代わりに、テキストを強調表示しようとすると、ブロックが表示されていたため、段落のチャンク全体が強調表示されます..

これに対抗するために、すべての改行文字 ( \n) を次のようなインライン要素に置き換えることにしました。

.space{
    height:0px;
    display:inline-block;
    width:100%;
}

したがって、HTML は次のようになります。

Line one
<span class="space"></span>
Line two

そして、次のように出力されます：

ラインワン

ライン 2

「よくやった！」と思いました。

これが私が望んでいた動作ではないことがわかった今日にスキップしてください。ユーザーが強調表示しているテキストは、プレーン テキストに処理された PDF ファイルに由来するため、次のような状況が発生します。

Hello there, this is a paragraph and\n 
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent

私は次のように処理します

Hello there, this is a paragraph and
<span class="space"></span> 
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent

次のように出力されます

こんにちは、これはパラグラフであり、

次の行に続き、この行は続き、親の設定幅で折り返されます

それは明らかに良くありません！これで、「改行」があるはずの場所にまったく新しい「段落区切り」ができました。そこで、1 つのスペース用と 2 つのスペース用の 2 つの異なるインライン「ブレーク」クラスを作成することにしました。

ダブル スペース要素は上記のように機能しますが、シングル スペース要素はコンテンツを次の行に移動するだけです。だから、これは私の実際の質問に私をもたらします:

インライン配置要素を使用してテキストを次の行に移動するにはどうすればよいですか?

また、テキストを などの別の要素で折り返すことspanができないため、CSS を使用してインライン改行要素と段落要素を作成することしかできません。

これを機能させるために私が試みたことがいくつかあります。widthシングル スペース要素の をダブル スペース要素のように設定する代わり100%に、コンテナの幅とテキストが占める幅を計算し、2 つを差し引いて、残りのスペースの幅を取得することができます。これにより、コンテンツを新しい行にプッシュできます。

ここでこのメソッドをテストできます: http://jsfiddle.net/charlescarver/ksvkk/12/

この方法の問題点は、幅は特定できましたが、複数行のテキスト ノードの幅を特定できなかったことです。また、コンテナーのサイズが変更された場合、これは柔軟ではありません。

私が持っていたがうまくいかなかった考えられる100% widthアイデアは、単一のスペース要素に を持たせ、テキストにそれをプッシュさせて、改行を次の行にプッシュすることでした。私が言ったように、私はそれを機能させることができませんでした。

4

2 に答える 2

0

これの代わりに、段落区切りの外観を望まない場所の場合:

.doublespace{
    height:0px;
    display:inline-block;
    width:100%;
}

これしかできないの？(つまり に切り替えinline-blockますblock):

.singlespace {
    height: 0px;
    display: block;
    width: 100%;
}

完全な例: http://codepen.io/pageaffairs/pen/koxlw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

    .singlespace{
    height:0;
    display:block;
    width:100%;
    }

    .doublespace{
    height:0;
    display:inline-block;
    width:100%;
    }

</style>

</head>
<body>

    <p>Hello there, this is a paragraph and
    <span class="singlespace"></span> 
    it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent</p>

    <p>Hello there, this is a paragraph and
    <span class="doublespace"></span> 
    it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent</p>

</body>
</html>

=====================

(ただし、コメントで述べたように、iPhone で 1 文字を選択するのは難しくありません。テキストを指で押さえると、テキストを細かく選択できる虫眼鏡が表示されます。ここで問題を誤解していない限り、 .)

于 2013-05-26T04:45:48.707 に答える