CSS技术问询：如何用负外边距实现字体溢出且不截断文本

针对你用contenteditable构建代码编辑器时，span元素通过负margin抵消边框却出现文本截断的问题，提供两个无需伪元素和绝对定位的可行方案：

方案一：用transform视觉偏移替代负margin #

transform: translateX()仅改变元素视觉位置，不会修改布局盒模型，因此不会触发文本截断，同时能实现偏移效果：

span {
  /* 用translateX替代负margin完成左偏移 */
  transform: translateX(-20px);
}

/* 高亮样式保留 */
span:first-child {
  background-color: red;
}
span:last-child {
  background-color: yellow;
}

方案二：给父元素加padding预留偏移空间 #

如果必须保留负margin的使用，可给包含span的父容器添加与负margin值匹配的左内边距，让span的偏移被父容器的padding容纳，避免文本超出容器范围：

/* 父容器样式 */
div {
  padding-left: 20px;
}

span {
  margin-left: -20px;
}

/* 高亮样式保留 */
span:first-child {
  background-color: red;
}
span:last-child {
  background-color: yellow;
}

这两种方案都能在不限制你禁用技术的前提下，解决文本截断问题，同时满足语法高亮需求。

内容的提问来源于stack exchange，提问作者Ood