4

メッセージをaxmlに保存する.NETアプリケーションがあります。私たちがする必要があるのは、それをhtmlに変換することです。サードパーティのライブラリ「HtmlFromXamlConverter」がそれを行うことがわかりましたが、マイナーな欠陥があります。axml に複数の改行が含まれている場合、次のように変換されます。

<P ><SPAN STYLE="text-decoration:underline;" /> </P>
<P ><SPAN STYLE="text-decoration:underline;" /> </P>
<P ><SPAN STYLE="text-decoration:underline;" /> </P>

1 つの改行としてのみ表示されます。下線のスタイルがあるため、値として " " を挿入できません。<p></p>問題は、改行として表示される空の P タグを設定する方法はありますか?

4

8 に答える 8

19

次のように小さなインライン ブロックを追加するのはどうですか。

p:after {
  content:"";
  display:inline-block;
  width:0px;
  outline:1px solid red; /* debug, remove me */
}

これにより、空の段落であっても、設定した行の高さが強制されます。

于 2013-08-15T09:20:51.747 に答える
13

私の知る限り、CSS だけではそれを行うことはできません。段落内に改行不可のスペースを追加する必要があります。

<p>&nbsp;</p>
于 2012-09-11T21:53:13.463 に答える
3

すでに述べた賢い解決策がありますが、CSS のみpを使用する私が気に入っている解決策の 1 つは、タグに最小の高さを設定することです。

.myText {
  font-size: 14px;
  line-height: 18px;
}
.myText p {
  min-height: 18px;
}

これにより、空のpタグでも隣のタグと同じ高さになり、テキストを挿入する必要がなくなります。

これは、ユーザー入力を表示している場合に非常に便利です。そのユーザー入力を再度保存したい場合があり、&nbsp;挿入したすべての s またはその他のものを慎重に取り除く必要があるからです。

欠点については、ラッピング要素が必要です。また、相対的な行の高さを使用できればいいのですが、それを機能させる方法がわかりません。

于 2017-02-05T16:52:12.453 に答える
2

HTMLコードは非常に奇妙で壊れていますが、修正できないと思います。CSSを使用して空の行を作成する方法pは、通常のCSSの警告とともに、その高さを行の高さと同じに設定し、マージンをゼロに設定することです（このレンダリングに表示されるデフォルトの上下のマージンを削除します）そうでなければ）：

p { height: 1.3em; margin: 0; }

これは、行の高さを1.3と想定しています。これは、（ブラウザにデフォルト設定させるのではなく）明示的に設定するのが最適です。

* { line-height: 1.3; }

値は、フォントのプロパティに従って選択する必要があります。しかし、1.3は典型的な状況には妥当です。

ページに他のp要素がある場合は、ルールの効果を目的のセットのみに制限するために、さらに複雑にする必要があります。（CSSのコンテンツに基づいて要素を選択する方法はありませんが、JavaScriptを使用できます。）

于 2012-09-12T05:17:09.850 に答える
1

下線が不要で、スペースを追加したい場合は、CSSの！importantタグを使用してインラインスタイルをオーバーライドできます。

p span {
   text-decoration: none !important; 
   /* This will force the underline to go away if you want to add spaces */
}

各段落タグの下部にマージンを追加したいだけの場合は、次のように実行できます。

p { 
   display: block;
   margin-bottom: <value>px;
}

これはページ上のすべての段落に影響することに注意してください。これらにクラスを適用することが、これらの改行タグを微調整するための最良の解決策になります。次に、次のようなことを行うことができます。

.linebreak {
   display: block;
   margin-bottom: <value>px;
}
于 2012-09-11T22:05:56.217 に答える
1

空の < p > タグを < br > に置き換えるには、いつでも JavaScript を使用できます。次のソリューションでは、jQuery を使用します。

var emptyPs = $('P > SPAN[STYLE="text-decoration:underline;"]').filter(function() {
    var $this = $(this);
    return $.trim($this.text()).length == 0;});

emptyPs.replaceWith('<br />');
于 2012-09-11T23:06:59.710 に答える