文本背景新线填充问题

Question

我正在处理文本块（文本上的背景块），并在新行上遇到填充问题。当浏览器（例如移动设备）由于缺少宽度而将文本切割成两行时，会出现问题。文字然后看起来像这样：

我真的不知道如何在新行的末尾设置填充css，因为它可以在句子的任何地方分解。你可以说用填充在它上面放一个跨度，但它不会固定在线会分解的地方。这取决于宽度。有什么建议吗？

Answer 1

你可以申请display: inline-block，但这会将背景颜色变成一个丑陋的盒子，看起来不像每条线条都有一个精确的宽度背景。不幸的是，CSS不允许我们定位除第一行之外的各行。

如果你不介意做一点创意＆＃34; （或者hacky）你可以将每个单词包装在后端的自己的元素中，或者使用JavaScript并将背景颜色应用于这些元素。相应地调整父word-spacing以消除差距。

＆＃13;

＆＃13;

.main {
  font-family: sans-serif;
  font-weight: bold;
  background-color: #99c;
  display: flex;
  height: 400px;
  flex-direction: row;
  align-items: center;
}

.text-container {
  max-width: 500px;
  display: inline-block;
  word-spacing: -15px;
  position: relative;
  padding-left: 20px;
  overflow: hidden;
}

.text-container::before {
  content: '';
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  z-index: 1;
}

span {
  font-size: 36px;
  line-height: 1.5em;
  color: white;
  background-color: black;
  padding: 0.25em 0.5em 0.25em 0;
  max-width: 360px;
}

＆＃13;

<div class="main">
  <div class="text-container">
    <span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试在＆＃34; Park后添加 ：＆＃34;之前＆＃34; Kung＆＃34;

Answer 3

padding workded !!! 通过控制台浏览器更改宽度并查看结果：

＆＃13;

＆＃13;

h1{
    background-color: #ff6a6a;
    padding: 33px;
    display: inline-block;
    word-wrap: break-word;
    width:300px
}

＆＃13;

<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert  </h1>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用<p>标记来整理文字，它显然有效demo

<div class="main">
  <div class="text-container">
    <p id="test">A Movie in the park: Kung Fu Panda</p>
  </div>
</div>

CSS

.main {
  font-family: sans-serif;
  font-weight: bold;
  background-color: #99c;
  display: flex;
  height: 400px;
  flex-direction: row;
  align-items: center;
}

.text-container {
  max-width: 400px;
}

p {
  font-size: 36px;
  line-height: 2em;
  color: white;
  background-color: black;
  padding: 0.5em;
  max-width: 360px;
}