Question

我想在标签的:after伪元素内部分割一些文本（从data-属性获取其内容）。我尝试使用word-break以及width，max-width和position:relative，但没有任何作品......

HTML：

<div class="checkbox">
    <input type="checkbox" name="checkme" id="checkme" />
    <label for="checkme" data-content="Some very long text that should be split into two lines like br tag"></label>
</div>

CSS：

.checkbox {
    display:block;
    clear:both;
    position:relative;
}

.checkbox:not(:only-child):not(:first-child) {
    margin:10px 0 0 0;
}

.checkbox input {
    display:none;
}

.checkbox label {
    display:inline-block;
    cursor:pointer;
    position:relative;
    width:13px;
    height:13px;
    border:1px solid #383838;
}

.checkbox label:after {
    font-family:Arial;
    font-size:14.5px;
    color:#383838;
    display:inline-block;
    position:absolute;
    left:calc(100% + 7px);
    content:attr(data-content);
    cursor:text;
    white-space:pre;
    word-break:break-all;
    top:50%;
    -webkit-transform:translate(0,-50%);
    -moz-transform:translate(0,-50%);
    transform:translate(0,-50%);
    /* max-width and width not working... */
    max-width:160px !important;
    width:160px !important;
}

.checkbox input:checked ~ label:before {
    display:block;
}

.checkbox input:not(:checked) ~ label:before {
    display:none;
}

.checkbox label:before {
    font-size:16px;
    color:#383838;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    pointer-events:none;
    margin:0;
    width:auto;
    content:"X";
    font-family:Arial;
}

我怎样才能做到正确（或者：我做错了什么）？

谢谢。

Answer 1

试试这个：按照@Carol McKay的建议添加top:170%和white-space:wrap

＆＃13;

.checkbox {
    display:block;
    clear:both;
    position:relative;
}

.checkbox:not(:only-child):not(:first-child) {
    margin:10px 0 0 0;
}

.checkbox input {
    display:none;
}

.checkbox label {
    display:inline-block;
    cursor:pointer;
    position:relative;
    width:13px;
    height:13px;
    border:1px solid #383838;
}

.checkbox label:after {
    font-family:Arial;
    font-size:14.5px;
    color:#383838;
    display:inline-block;
    position:absolute;
    left:calc(100% + 7px);
    content:attr(data-content);
    cursor:text;
    white-space:wrap;
    word-break:break-all;
    top:170%;
    -webkit-transform:translate(0,-50%);
    -moz-transform:translate(0,-50%);
    transform:translate(0,-50%);
    /* max-width and width not working... */
    max-width:160px !important;
    width:160px !important;
}

.checkbox input:checked ~ label:before {
    display:block;
}

.checkbox input:not(:checked) ~ label:before {
    display:none;
}

.checkbox label:before {
    font-size:16px;
    color:#383838;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    pointer-events:none;
    margin:0;
    width:auto;
    content:"X";
    font-family:Arial;
}

＆＃13;

<div class="checkbox">
    <input type="checkbox" name="checkme" id="checkme" />
    <label for="checkme" data-content="Some very long text that should be split into two lines like br tag"></label>
</div>

＆＃13;

CSS：内线换行：之后

1 个答案: