带有点的padd元素

发布于 2025-02-12 15:18:42 字数 446 浏览 1 评论 0原文

我有一个固定但可变内容的内联块元素。我想用点填充元素，直到宽度为100％。想想溢出：Ellispis，但反转。

span {
dislay: inline-block;
width: 6.27in;
/* something here to pad with dot? */
}

span:after { /* or here perhaps? */ }

<span>John Doe</span>
<span>Lorem Ipsum</span>
<span>Hello world</span>
<span>Test</span>

应该渲染

John Doe......
Lorem Ipsum...
Hello World...
Test..........

原文

I have a inline-block element with fixed with but variable content. I want to pad the element with dots until 100% width. Think of overflow: ellispis but reversed.

span {
dislay: inline-block;
width: 6.27in;
/* something here to pad with dot? */
}

span:after { /* or here perhaps? */ }

<span>John Doe</span>
<span>Lorem Ipsum</span>
<span>Hello world</span>
<span>Test</span>

Should render

John Doe......
Lorem Ipsum...
Hello World...
Test..........

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝礼 2025-02-19 15:18:42

您可以像以下那样做：

span {
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
  width: 6.27in;
}

span:after {
  --d:".......................................";
  --_d: var(--d) var(--d);
  content: var(--_d) var(--_d) var(--_d) var(--_d);
}

<span>John Doe</span>
<span>Lorem Ipsum</span>
<span>Hello world</span>
<span>Test</span>

You can do it like below:

span {
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
  width: 6.27in;
}

span:after {
  --d:".......................................";
  --_d: var(--d) var(--d);
  content: var(--_d) var(--_d) var(--_d) var(--_d);
}

<span>John Doe</span>
<span>Lorem Ipsum</span>
<span>Hello world</span>
<span>Test</span>

回复收藏 0 原文

九公里浅绿 2025-02-19 15:18:42

可以做到几种方法。

在您的情况下，最直接的可能足够，是在每条文本的底部放入一系列，作为重复的背景模式，然后通过给文本一个背景来隐藏在实际文本下方的位颜色。

这是一个示例片段：

div {
  width: 6.27in;
  position: relative;
  background-image: radial-gradient(circle, black 0 30%, transparent 30% 100%);
  background-size: 8px 8px;
  background-position: left bottom;
  background-repeat: repeat no-repeat;
}

span {
  background: white;
  padding-right: 0.25em;
}

<div><span>John Doe</span></div>
<div><span>Lorem Ipsum</span></div>
<div><span>Hello world</span></div>
<div><span>Test</span></div>

请注意，原始跨度已被DIV替换为您的示例，在问题中显示了它们。

您可以使用一种替代方法，一个宽度为100％的伪元素（以及具有Overflow-X隐藏的父元）和相同的虚线背景。在这种情况下，虽然点不一定会排列。

There are a few ways this can be done.

The most straightforward, which may be enough in your case, is to have line of dots put in at the bottom of each line of text as a repeating background pattern and then hide the bit that goes beneath the actual text by giving the text a background color.

Here's an example snippet:

div {
  width: 6.27in;
  position: relative;
  background-image: radial-gradient(circle, black 0 30%, transparent 30% 100%);
  background-size: 8px 8px;
  background-position: left bottom;
  background-repeat: repeat no-repeat;
}

span {
  background: white;
  padding-right: 0.25em;
}

<div><span>John Doe</span></div>
<div><span>Lorem Ipsum</span></div>
<div><span>Hello world</span></div>
<div><span>Test</span></div>

Note that the original spans have been replaced by divs as your example in the question shows them one under the other.

You could use an alternative method, an after pseudo element with 100% width (and the parent with overflow-x hidden) and the same sort of dotted background. In this case though the dots don't necessarily line up.

回复收藏 0 原文

~没有更多了~