2

自分が何をしているのかほとんどわからないので、可能な限り最悪の説明を提供しながらすみません。

ボードのタイトルやボードの説明などの保存された日付を取り、...きれいにするフォーラム用のテーブルをコーディングしています。これは、基本的に、ずさんなテキストを無視して、私が見たいものです。

ここに画像の説明を入力

これは私がこれまでに持っているものです。

ここに画像の説明を入力

すべての単語の最初の文字を青色にする方法がわかりませんが、誰も答えがない場合は諦めます。

私の大きな質問は、ボードの説明から最初の行または特定の数の単語/文字を削除するにはどうすればよいですか?

これは、すべての情報を含む表です。

newindex = "<table width=100% bgcolor=#dfdfdf>
<tr>
    <td bgcolor=#56d5cb width=25%></td>
    <td bgcolor=#000 style=color:#fff><header1>" + description + "</header1></td>
</tr>

<tr bgcolor=#eeeeee>
    <td><header2>" + link + "</header2></td>
    <td><header3>" + description + "</header3></td>
</tr></table>";

説明とリンクはどちらも、ボードに関連するテキストのチャンクとして保存されます。

これが私のCSSです：

header1 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20;
    color: #fff;
    text-transform:lowercase;
    text-decoration:none;
    display:block;
}

header1:first-letter {
    color:#56d5cb;
}    

header2 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 30;
    color: #000;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:normal;
    padding-right:10px;
    display:block;
}

header2:first-letter{
    color: #c52c0e;
}

header3 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15;
    color: #000;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:normal;
    text-align:right;
    padding-right:10px;
}

追加のヘルプがある場合は、Jcink/Invision Power Board でこれをコーディングしようとしており、十分な評判がないため明らかにリンクできないカスタム フォーラム構造スクリプトを使用しています。

私は CSS の基本しか扱ったことがなく、Javascript を扱ったことはありません。

4

2 に答える 2

2

純粋な CSS では、できません。疑似クラス:first-letterは、すべての単語ではなく、要素の最初の文字のみを選択します。

JQuery を使えばできます (JavaScript にタグを付けたので、問題ないと思います)。

$(document).ready(function() {
    var words = $('header1').text().split(' ');
    var html = '';
    $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('header1').html(html);
});

ワーキングJSFiddle。

この質問に基づく回答

于 2013-08-22T07:17:39.103 に答える