Question

我需要显示用户列表，该列表应如下例所示：

海伦伯恩斯
爱德华   费尔法克斯罗切斯特
伯莎   安托内塔梅森
阿德勒   的瓦伦

有没有办法在不使用javascript的情况下实现这一目标？每行应该是一个跨度，即<span>Helen</span><span>Burns</span>是不可接受的。

Answer 1

不，没有。如果您不希望自己的姓氏出现在自己的标签中，则必须使用某种形式的脚本来完成此操作。

对于浏览器，每一行都是一个元素，就“CSS”而言，“单词”本身没有单独的含义。您必须将单词放在不同的标签中才能完成您想要的操作。

Answer 2

浏览器不会自动知道名称的哪个部分是姓氏，因此您必须添加额外的标记才能达到您想要的效果。

Answer 3

对于仅使用CSS的常见浏览器，没有解决方案。你应该使用javascript或HTML + CSS。

Answer 4

没有纯css这是不可能的（因为你不希望在标记中分离）......

<span>Monty Burns</span><br />
<span>Bart Simpson</span>
<script type="text/javascript">
$(document).ready(function() {
    var spans = $('span');
    spans.each(function(index, element) {
        var span = $(element);
        var spanText = span.text();
        var spanTextArray = spanText.split(' ');
        var spanTextArrayLength = spanTextArray.length;
        var lastName = spanTextArray[spanTextArrayLength -1];
        spanTextArray.pop();
        var firstName = spanTextArray.join(' ');
        span.text(firstName);
        var spanLastName = $('<span/>');
        spanLastName.css('font-weight', 'bold');
        spanLastName.css('margin-left', '5px');
        spanLastName.appendTo(span);
        spanLastName.text(lastName);
    });
});
</script>

working demo

编辑：如果您不想在其中添加额外的span - 标记，只需更改

var spanLastName = $('<span/>');
spanLastName.css('font-weight', 'bold');

到

var spanLastName = $('<strong/>');

Answer 5

我认为CSS不可能，因为你的例子没有显示任何顺序：

海伦伯恩斯
   爱德华费尔法克斯罗切斯特
   Bertha Antoinetta 梅森
   Adèle Varens

Answer 6

我不知道为什么你可能不希望在姓氏周围留下额外的标签（正如其他答案和评论所暗示的那样），但是如果你只是寻找极简主义标记，那么这是有效的（没有{{ 1}}甚至使用过）：

HTML：

span

的CSS：

 <body>
    First Middle <strong>Last</strong>
    First Middle <strong>Last</strong>
    First Middle <strong>Last</strong>
 </body>

使用您想要的样式创建“行”，而不是单个标记（如果您愿意，可以是strong:after {content:' '; display: block;}而不是span。

编辑：当然，这不适用于IE7或以下。

是否有跨浏览器的CSS方法来装饰span块中的最后一个单词？

6 个答案: