V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
jmyz0455
V2EX  ›  CSS

CSS3 里通过伪元素添加内容的时候,如何连续输出多个空格?

  •  
  •   jmyz0455 · 2016-09-01 11:53:26 +08:00 · 7438 次点击
    这是一个创建于 3005 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如这个,我想在 li 标签前面加些特殊符号,类似 list-style 的效果

    .demo ul li::before{
    content: "\20\20\20\2022\20\20\20";
    color: #FFAF00;
    }

    但是 content 里面的内容无法输出多个空格,在页面上看一个空格也没有,只有一个“·”。

    其实我只是想让这个插进去的内容多撑一点空间而已,就像“    ·    ”,请问这种情况如何解决?

    15 条回复    2016-09-01 16:49:21 +08:00
    lxrmido
        1
    lxrmido  
       2016-09-01 13:40:06 +08:00
    content:"\00A0\00A0\00A0\00A0";
    FrankFang128
        2
    FrankFang128  
       2016-09-01 13:44:04 +08:00 via Android
    display inline block
    width 随便设

    别用空格做排版。。。
    learnshare
        3
    learnshare  
       2016-09-01 14:03:21 +08:00
    @FrankFang128 是的

    空格的宽度不确定,用来排版是个坑
    hkongm
        4
    hkongm  
       2016-09-01 14:17:13 +08:00
    padding 或者 width
    jmyz0455
        5
    jmyz0455  
    OP
       2016-09-01 14:58:01 +08:00
    @learnshare @FrankFang128 明白,既然说到排版,我有个问题想继续请教下去

    很多时候要输入用户姓名,经常遇到只有一个字的姓,比如

    <li><span>小 明</span></li>
    <li><span>小小明</span></li>

    li 比 span 肯定要宽很多, span 里面是左对齐。平时我都是用空格排版的,这种情况怎么做好呢?
    FrankFang128
        6
    FrankFang128  
       2016-09-01 14:59:21 +08:00 via Android
    如果上面三个字,下面四个字,你要怎么对齐
    jmyz0455
        7
    jmyz0455  
    OP
       2016-09-01 15:04:04 +08:00
    @FrankFang128 @hkongm @learnshare @lxrmido 对了有个奇怪的问题,这些特殊符号可以弄大一点吗?比如这个小圆点 content: "\2022"; 放大到直径 4px ?
    newbieo0O
        8
    newbieo0O  
       2016-09-01 15:06:37 +08:00
    @FrankFang128 &emsp; &ensp;
    FrankFang128
        9
    FrankFang128  
       2016-09-01 15:07:04 +08:00 via Android
    @jmyz0455 iconfont 或者换字体
    jmyz0455
        10
    jmyz0455  
    OP
       2016-09-01 15:08:02 +08:00
    @FrankFang128 这种情况我也遇到过,是类似于:

    文 员
    设计师
    项目经理
    信号工程师

    当时设计师跟我说就两个字的塞两个空格,比三个字长的一概不管,于是我就强行塞 &nbsp;
    newbieo0O
        11
    newbieo0O  
       2016-09-01 15:12:50 +08:00
    FrankFang128
        12
    FrankFang128  
       2016-09-01 15:14:53 +08:00 via Android
    显然这是设计师的问题

    对其没有一致性

    用 after 做 justify text
    learnshare
        13
    learnshare  
       2016-09-01 15:30:55 +08:00
    @jmyz0455 小圆点可以用 CSS 来写,爱写多大写多大。

    不同长度的字,可以考虑右对齐,或者两端对齐。
    exoticknight
        14
    exoticknight  
       2016-09-01 15:35:26 +08:00
    不是很复杂的情况下用 &emsp; &ensp; 也是行的
    jmyz0455
        15
    jmyz0455  
    OP
       2016-09-01 16:49:21 +08:00
    @newbieo0O 有现成案例真好,完全明白了谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2635 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:19 · PVG 19:19 · LAX 03:19 · JFK 06:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.