如何控制文本节点与span元素间距不超过1rem(16px)?

问题原因 #

你遇到的间距异常主要由两个问题导致：

1. CSS拼写错误：h2样式中的justfiy-content拼写有误，正确属性名为justify-content，属性失效可能引发布局异常
2. 匿名flex项布局问题：直接放在flex容器（h2）中的纯文本属于匿名flex项，当文本换行时，该匿名项的宽度会撑满整个h2的可用宽度，你给span设置的margin-left: 1rem就变成了文本块右边缘到span的距离，而非最后一个文本字符到span的距离，导致间距远大于1rem

修复方案 #

步骤1：修改HTML结构，包裹文本内容

把h2内的纯文本用一个额外的span标签包裹，避免匿名flex项的布局问题：

<div class="container">
  <h2>
    <span class="title-text">Stackoverflow is a QA website</span>
    <span class="link"></span>
  </h2>
</div>

步骤2：修改CSS样式

• 修正拼写错误的属性
• 给包裹文本的span添加自适应宽度的样式
• （可选）如果希望span隐藏时不占用布局空间，可把visibility替换为display控制显隐：

html {
  font-size: 16px;
}

.container {
  max-width: 500px;
}

h2 {
  font-size: 2.25rem;
  line-height: 3rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: flex;
  /* 修正拼写错误 */
  justify-content: flex-start;
  align-items: center; /* 统一垂直对齐，可省略span上的align-self */
}

/* 新增包裹文本的样式 */
h2 > .title-text {
  white-space: normal;
  word-break: break-word;
}

h2>span.link {
  display: flex;
  /* 如果需要隐藏时不占位，把visibility替换为display: none，hover时改成display: flex */
  /* visibility: hidden; */
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-left: 1rem;
  width: 40px !important;
  height: 40px !important;
  border-radius: 20px;
  background: #eee;
  -webkit-mask-image: radial-gradient(white, black);
  overflow: hidden;
}

h2:hover>span.link {
  /* visibility: visible; */
  display: flex;
}

/* 原有after的样式保留即可，无需修改 */
span.link:after {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  content: "";
  border-radius: 20px;
  width: 40px !important;
  height: 40px !important;
  background-image: url("data:image/svg+xml;utf-8, <svg xmlns='http://www.w3.org/2000/svg'  width='100%' height='100%' viewBox='0 0 105 105' version='1.1' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g id='Medium-M' transform='matrix(1,0,0,1,-11.233,88.1885)'><path fill='%23616161' d='M65.882,-56.192L58.465,-48.713C61.394,-48.446 63.917,-47.856 66.032,-46.941C68.147,-46.027 69.95,-44.822 71.439,-43.326C74.195,-40.549 76.033,-37.497 76.954,-34.168C77.875,-30.839 77.884,-27.519 76.983,-24.206C76.082,-20.894 74.256,-17.862 71.506,-15.112L55.276,1.07C52.526,3.819 49.494,5.651 46.182,6.566C42.869,7.481 39.55,7.486 36.224,6.582C32.898,5.678 29.86,3.848 27.11,1.092C24.355,-1.685 22.516,-4.737 21.596,-8.066C20.675,-11.395 20.672,-14.714 21.587,-18.024C22.502,-21.333 24.334,-24.366 27.084,-27.122L35.468,-35.497C34.69,-37.256 34.189,-39.165 33.963,-41.226C33.737,-43.287 33.836,-45.262 34.261,-47.15L20.23,-33.194C16.251,-29.206 13.589,-24.795 12.244,-19.96C10.9,-15.126 10.896,-10.284 12.233,-5.433C13.571,-0.583 16.253,3.853 20.279,7.874C24.333,11.933 28.783,14.628 33.631,15.96C38.478,17.292 43.318,17.285 48.149,15.94C52.981,14.595 57.38,11.939 61.348,7.972L78.328,-9.04C82.322,-13.034 84.992,-17.449 86.337,-22.283C87.681,-27.117 87.687,-31.958 86.352,-36.806C85.018,-41.653 82.324,-46.088 78.271,-50.108C76.852,-51.559 75.142,-52.802 73.141,-53.837C71.139,-54.871 68.72,-55.656 65.882,-56.192ZM61.585,-15.044L69.002,-22.523C66.072,-22.79 63.551,-23.38 61.439,-24.295C59.326,-25.209 57.523,-26.412 56.027,-27.901C53.245,-30.684 51.393,-33.74 50.473,-37.069C49.552,-40.397 49.551,-43.716 50.468,-47.026C51.386,-50.336 53.22,-53.365 55.97,-56.115L72.16,-72.297C74.937,-75.053 77.981,-76.888 81.294,-77.803C84.606,-78.717 87.917,-78.721 91.227,-77.814C94.537,-76.907 97.583,-75.065 100.365,-72.288C103.115,-69.532 104.95,-66.491 105.871,-63.165C106.792,-59.839 106.795,-56.52 105.88,-53.208C104.965,-49.895 103.132,-46.864 100.383,-44.114L92.007,-35.739C92.785,-33.954 93.287,-32.037 93.513,-29.99C93.739,-27.943 93.639,-25.972 93.214,-24.078L107.245,-38.042C111.224,-42.03 113.885,-46.442 115.227,-51.276C116.568,-56.11 116.571,-60.951 115.234,-65.799C113.897,-70.647 111.217,-75.084 107.196,-79.111C103.137,-83.164 98.685,-85.858 93.84,-87.192C88.995,-88.526 84.157,-88.521 79.326,-87.176C74.495,-85.832 70.079,-83.159 66.079,-79.159L49.148,-62.196C45.147,-58.197 42.476,-53.781 41.135,-48.949C39.793,-44.118 39.788,-39.278 41.119,-34.431C42.45,-29.583 45.143,-25.149 49.197,-21.128C50.621,-19.677 52.334,-18.433 54.335,-17.395C56.336,-16.357 58.753,-15.574 61.585,-15.044Z' style='fill-rule:nonzero;'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

修改后无论h2宽度是多少、文本是否换行，link span都会紧跟在文本最后一个字符后方1rem的位置，不会出现间距过大的问题，原有svg图标也完全保留。

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