24

ブログのコード スニペットにカスタム スタイルを使用したいと考えています。次のスタイルを定義しました。

mystyle {  
  background: #C3FFA5;  
  border: solid 1px #19A347;  
  color: #191919;  
  display: block;  
  font-family: monospace;  
  font-size: 12px;  
  margin: 8px;  
  padding: 4px;  
  white-space: pre;  
}

次のように使用します。

<mystyle>
int main() {
    cout << "Hello World" << endl;
}
</mystyle>

これにより、次の出力が得られます。Firefox と Google Chrome で試してみました。

出力

ブロックの先頭にある余分な行を削除したい。明らかに、改行がどこから来たのか、代わりに使用できることを理解しています<mystyle>int main() {。<pre>の代わりに使用すると<mystyle>、余分な改行がないので、カスタム スタイルでもこれを行うことは可能ですか?

4

10 に答える 10

24

この非常によく似た質問への回答を確認してください。

.mystyle:first-line {
    line-height: 0px;
}

ただし、最新のブラウザが必要になる場合があります。

于 2015-08-08T19:39:59.057 に答える
17

設定した line-height に margin-top を調整します。

.text {
    margin-top: -1em;
    white-space: pre-line;
}

これは FF でも機能しますが、これは :first-line hack では修正できません。

于 2016-06-16T02:30:31.093 に答える
2

ここではコードの書式設定が重要です。各行がその行の最初の文字から始まることを確認してください。

<pre class="code">
int main() {
    cout << "Hello World" << endl;
}
</pre>

次の CSS で十分です。

pre.code
{
    background: #C3FFA5;  
    border: solid 1px #19A347;  
    color: #191919;  
    display: block;  
    font-family: monospace;  
    font-size: 12px;  
    margin: 8px;  
    padding: 4px;
}

ホワイトスペースについてはこの記事を、 「それと戦う」方法については以下をお読みください。前回の記事ではインライン要素間の空白について説明しましたが、フォーマットの解決策はあなたの問題に関連しています。

于 2013-06-28T13:43:10.783 に答える