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

最新推荐文章于 2025-08-07 20:41:54 发布

原创最新推荐文章于 2025-08-07 20:41:54 发布 · 991 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html

web前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个医疗项目中使用contenteditable属性时，在Chrome浏览器下遇到的光标显示问题，并提供了一种通过CSS解决方案，确保在div为空时也能正常显示光标。

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

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