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 回答
1

在字符串对象的 JavaScript 中，有一个“substring(from, to)”方法，您可以通过它在某个位置拆分字符串：http: //www.w3schools.com/jsref/jsref_substring.asp

所以你可以使用 substring(0,1) 方法在第一个字母处分割你的字符串。之后，您可以用第一个字母为蓝色的字符串着色。

我不知道这是否是最简单的解决方案，但我就是这样做的。

希望这可以帮助。

于 2013-08-22T07:14:51.423 回答