1
ラベルの疑似要素（data-属性から内容を取得する）内のテキストを分割したいと考えています。私はwidth、max-widthとposition:relativeとword-breakともしてみましたが、何もうまくいかない...CSS：改行の後：
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;
}
どのように私は右のそれを作る（またはすることができます：何が私は間違っていましたか？）
ありがとうございます。
あなたのホワイトスペースを変更します。事前に、ホワイトスペースに：ラップ; –