可编辑的div无内容时聚焦无光标以及内容为纯字母时的不换行问题

微行

于 2020-07-15 14:06:04 发布

阅读量873

点赞数 2

分类专栏： web前端文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/itlsq/article/details/107359304

版权

web前端专栏收录该内容

26 篇文章

订阅专栏

这个是项目中遇到的一个小问题，在此记录一下，我们医疗项目有很多写病历的地方用到了可编辑的div，即contenteditable=“true”,但是在chrome下有个问题，就是在没有任何内容的情况下聚焦时没有光标，下面用CSS解决一下：

.outEditableDiv{ 
   outline: none;
   word-break: break-all; // 解决纯字母时不自动换行问题
   &:empty:before {
     content: attr(data-placeholder);
   }
   &:focus:before {
     content: ' '; // 解决无内容时聚焦没有光标
   }
}