向动态换行符添加内容

时间：2019-03-06 18:06:43

标签： html css css3

我正在尝试模仿JSDoc视觉设计的某些文本内容。我想在每行中添加'*'。

下面，我通过将每一行添加到自己的段落中来拆分行。

HTML结构：

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet,
  </p>
  <p class="text">
    consectetur adipisicing elit. 
  </p>
    <p class="text">
    Sunt dignissimos hic voluptatem
  </p>
  <p class="text">
    in fugit aperiam tempore. Odio 
  </p>
    <p class="text">
    debitis, numquam doloremque
  </p>
  <p class="text">
    laboriosam, commodi fugit 
  </p>
  <p class="text">
    possimus veritatis autem quos 
  </p>
  <p class="text">
    nesciunt, dignissimos facere.
  </p>
</div>

样式：

.container {
  font-size: 18px;
  font-family: 'Lucida Console', Monaco, monospace;
}

.container:before {
  content: '/**';
  white-space: pre;
}

.container:after {
  content: ' */';
  white-space: pre;
}

.text:before {
  content: ' * ';
  white-space: pre;
}

但是我想知道是否可以在适应父母宽度的动态换行符/自动换行中实现，如以下示例所示：

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam 
    tempore. Odio debitis, numquam doloremque laboriosam, 
    commodi fugit possimus veritatis autem quos nesciunt, 
    dignissimos facere.
  </p>
</div>

codepen进行其他说明。

2 个答案:

答案 0 :(得分：1)

修改

我更新并使用了em单位，用于伪造的缩进/填充和定位，并随着设置的字体大小自动调整。而且，由于伪元素继承了其父字体大小，因此它也匹配每个文本行。

除非换成脚本，否则不能动态插入换行符。即使这样，重新计算在何时何地插入星星也不是那么容易。

一个简单的技巧（仅使用CSS）是将伪元素定位为绝对，具有足够的 stars 覆盖文本，隐藏溢出，然后通过填充使文本缩进

请注意，我将伪代码更改为CSS3语法，在伪元素之前添加了2个冒号，因此，除非需要支持IE8，否则请使用较新的语法。

堆栈片段

.container {
  width: 390px;
  font-size: 48px;
  font-family: 'Lucida Console', Monaco, monospace;
  background-color: #e0e0e0;
}

.container::before {
  content: '/**';
  white-space: pre;
}

.container::after {
  content: ' */';
  white-space: pre;
}

.text {
  position: relative;
  overflow: hidden;        /* hide overflowed stars */
  padding-left: 1.5em;      /* indent text */
  margin: 0;               /* remove p's default top/bottom margin */
}

.text::before {             /* note: "\A" in "content" create line break */
  content: '*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A*\A';
  white-space: pre;
  position: absolute;
  top: 0;
  left: .6em;
  height: 100%;
}
<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam 
    tempore. Odio debitis, numquam doloremque laboriosam, 
    commodi fugit possimus veritatis autem quos nesciunt, 
    dignissimos facere.
  </p>
</div>

如Temani Afif所述，另一种选择是在伪对象上设置固定宽度，这样可以避免在\A中使用换行符content，尽管最终结果仍然相同

堆栈片段

.container {
  width: 390px;
  font-size: 36px;
  font-family: 'Lucida Console', Monaco, monospace;
  background-color: #e0e0e0;
}

.container::before {
  content: '/**';
  white-space: pre;
}

.container::after {
  content: ' */';
  white-space: pre;
}

.text {
  position: relative;
  overflow: hidden;        /* hide overflowed stars */
  padding-left: 1.5em;      /* indent text */
  margin: 0;               /* remove p's default top/bottom margin */
}

.text::before {
  content: '*********************************************';
  word-break: break-all;
  position: absolute;
  top: 0;
  left: .6em;
  height: 100%;
  width: 0;
}
<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam 
    tempore. Odio debitis, numquam doloremque laboriosam, 
    commodi fugit possimus veritatis autem quos nesciunt, 
    dignissimos facere.
  </p>
</div>

答案 1 :(得分：1)

如果您想以更动态的方式来知道行数未知，可以将*视为重复的背景图片。然后，您可以有任意多行，还可以根据需要更改字体大小

在此示例中，我将使用以下图标：https://fontawesome.com/icons/asterisk?style=solid（您以后可以轻松更改另一个图标）

.container {
  width: 390px;
  font-size: 18px;
  font-family: 'Lucida Console', Monaco, monospace;
  background-color: #e0e0e0;
  margin:5px;
}

.container::before {
  content: '/*';
  display:block;
  font-weight:bold;
}

.container::after {
  content: '*/';
  display:block;
  margin-left:12px;
  font-weight:bold;
}

.text {
  position: relative;
  padding-left: 30px;
  margin: 0; 
  line-height:1.2em;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"  ><path fill="currentColor" d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" class=""></path></svg>') 12px -2px/0.5em 1.16em repeat-y;
}
<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam 
    tempore. Odio debitis, numquam doloremque laboriosam, 
    commodi fugit possimus veritatis autem quos nesciunt, 
    dignissimos facere.
  </p>
</div>

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam
  </p>
</div>

<div class="container" style="font-size:12px;">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam
  </p>
</div>
<div class="container" style="font-size:24px;">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam
  </p>
</div>

对于第一个*和最后一个.container { width: 390px; font-size: 18px; font-family: 'Lucida Console', Monaco, monospace; background-color: #e0e0e0; margin:5px; } .container::before, .container::after{ content: '/'; width:2em; display:block; font-weight:bold; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path fill="currentColor" d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" class=""></path></svg>') 12px -2px/0.5em 1.16em no-repeat; } .container::after { text-align:right; } .text { position: relative; padding-left: 30px; margin: 0; line-height:1.2em; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path fill="currentColor" d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" class=""></path></svg>') 12px -2px/0.5em 1.16em repeat-y; }，您还可以考虑使用相同的图标

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam 
    tempore. Odio debitis, numquam doloremque laboriosam, 
    commodi fugit possimus veritatis autem quos nesciunt, 
    dignissimos facere.
  </p>
</div>

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam
  </p>
</div>

<div class="container" style="font-size:12px;">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam
  </p>
</div>
<div class="container" style="font-size:24px;">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit. Sunt dignissimos hic voluptatem in fugit aperiam
  </p>
</div>
{{1}}

相关问题
最新问题