1 回答

TA貢獻1942條經驗 獲得超3個贊
您可以考慮文本縮進和一些翻譯來控制光標位置。僅當 div 為:empty
div[data-prompt][contenteditable=true]:before {
content: attr(data-prompt);
font-family: 'Open Sans', sans-serif;
color: black;
}
div[data-placeholder]:empty:after {
content: attr(data-placeholder);
color: black;
/* added */
display: inline-block;
transform: translateX(-28px);
text-indent: 0;
/**/
}
/* added */
div[data-placeholder]:empty {
text-indent: 38px;
}
div[data-prompt][contenteditable=true]:empty:before {
display: inline-block;
transform: translateX(-37px);
text-indent: 0;
}
/**/
div[data-prompt][contenteditable=true] {
border: 1px solid;
}
<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>
對于更通用的方式,您可以依賴 CSS 變量:
div[data-prompt][contenteditable=true]:before {
content: attr(data-prompt);
font-family: 'Open Sans', sans-serif;
color: black;
}
div[data-placeholder]:empty:after {
content: attr(data-placeholder);
color: black;
/* added */
display: inline-block;
transform: translateX(calc(10px - var(--d)));
text-indent: 0;
/**/
}
/* added */
div[data-placeholder]:empty {
text-indent: var(--d);
}
div[data-prompt][contenteditable=true]:empty:before {
display: inline-block;
transform: translateX(calc(1px - var(--d)));
text-indent: 0;
}
/**/
div[data-prompt][contenteditable=true] {
border: 1px solid;
}
<div style="--d:37px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>
<div style="--d:64px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will not " data-placeholder="..."></div>
- 1 回答
- 0 關注
- 142 瀏覽
添加回答
舉報