javascript 使用点或连字符填充标签之间的可用空间

brc7rcf0 于 2023-05-05 发布在 Java

关注(0)|答案(6)|浏览(226)

我有一个标签包含在一个div中的页面，标签有一个变量，我想用字符，点或'-'填充两者之间的空格。
举个例子。
我的标签文本% 1 -----------此处有一些文本。
我的短信2 ---------------------------------------------另一条短信。
如果你注意到两个文本都是对齐的（或者至少我试过），可能是一个计算字符数的问题，但是字符可以有不同的宽度，任何人都知道一个干净的方法来在Asp.NET，css，jquery或其他任何东西中以编程方式做到这一点？
更新
................
有人建议在答案中将两个标签与css对齐，但我认为我会遇到同样的问题，中间的字符，当然可以是另一个标签。有什么想法吗
更新
.................
帕特里克的回答非常接近解决方案，但现在连字符在IE8中不显示，也许我的评论中有一个误解，它应该在IE7，IE8和Firefox上工作，只有这些浏览器。
谢谢大家。

JavaScript

来源：https://stackoverflow.com/questions/3097851/fill-available-spaces-between-labels-with-dots-or-hyphens

6条答案

按热度按时间

3j86kqsm1#

试试这个：http://jsfiddle.net/FpRp2/4/（已更新，现在适用于ie7）
**Marcel给出的解决方案是使用虚线边框而不是文本连字符，解决了IE7的最终问题。

(Note，目前为止我只在Safari、Firefox和Chrome上进行了测试。）
编辑：IE8工作。正在修复IE7。

.outer {
  display: inline-block;
  *display: inline;
  zoom: 1;
  position: relative;
  clip: auto;
  overflow: hidden;
}

.container {
  position: relative;
  text-align: right;
  white-space: nowrap;
}

.filler {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px dashed #333;
  height: 50%;
}

.label {
  background: white;
  float: left;
  margin-right: 20px;
  padding-right: 4px;
  position: relative;
}

.text {
  background: white;
  padding-left: 4px;
  position: relative;
}

<div class='outer'>
  <div class='container'>
    <div class='filler'></div>
    <span class='label'>some label</span>
    <span class='text'>some text</span>
  </div>
  <br>
  <div class='container'>
    <div class='filler'></div>
    <span class='label'>some other label</span>
    <span class='text'>some other text</span>
  </div>
</div>

赞(0）回复(0）举报 2023-05-05

qxgroojn2#

我已经在一个表上实现了这一点纯CSS，甚至没有使用任何span或div。
CSS是：

.dot-table td {
    max-width:200px;
    overflow:hidden;
    white-space:nowrap;
}
.dot-table td:first-child:after {
    content:" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - "
}

HTML是

<table class="dot-table">
  <tr>
    <td>
       Coffee
    </td>
    <td>
       45 INR
    </td>
  </tr>
  <tr>
    <td>
       Tea
    </td>
    <td>
       36 INR
    </td>
   </tr>
</table>

详细输出（来自我开发的站点）

查看它live here .

赞(0）回复(0）举报 2023-05-05

83qze16e3#

使用flexbox的解决方案，支持文本溢出：省略号将内容保留在一行上：
http://codepen.io/anon/pen/jPZdgr

.item {
  display: flex;
  justify-content: space-between;
}
.descripcion {
  /*background-color: green;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.descripcion:after {
  content: " ........................................................................................................................................................................................................................................................................................."
}
.precio {
  /*background-color: red;*/
  flex-shrink: 0;
}

<div class="item">
  <div class='descripcion'>Junta la trócola</div>
  <div class='precio'>0´33</div>
</div>
<div class="item">
  <div class='descripcion'>Gamusinos en oferta c/u</div>
  <div class='precio'>6´47</div>
</div>
<div class="item">
  <div class='descripcion'>Saco de rafia y linterna a pedales</div>
  <div class='precio'>12´663584153,351,5,154</div>
</div>
<div class="item">
  <div class='descripcion'>Jaula de bambú con led para gamusinos</div>
  <div class='precio'>21´99</div>
</div>
<div class="item">
  <div class='descripcion'>Otro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre
    más de una, o de dosOtro concepto más repartido entre más de una, o de dos</div>
  <div class='precio'>1.694</div>
</div>
<div class="item">
  <div class='descripcion'>Chismes y achiperres surtidos</div>
  <div class='precio'>0´10</div>
</div>
<div class="item">
  <div class='descripcion'>Yugo, barzón, cavijal y mancera</div>
  <div class='precio'>33´7433333333333333333333</div>
</div>
<div class="item">
  <div class='descripcion'>Coyunda, sobeo, ramales y cordel</div>
  <div class='precio'>125´87</div>
</div>
<div class="item">
  <div class='descripcion'>Media, cuartilla, celemín y 1 envuelza</div>
  <div class='precio'>48´04</div>
</div>

赞(0）回复(0）举报 2023-05-05

vawmfj5a4#

您需要使用CSS来调整这两部分内容的布局。要么将标签分成两个标签，并对每个标签应用css类，要么用<span>标记将标签内的每一位文本 Package 起来，并以这种方式设置它们的样式。
用字符填充空白空间来尝试调整布局不是正确的方法，并且不建议使用相同的原因，因为您不会通过在任何地方添加空格字符来格式化文本文档。

赞(0）回复(0）举报 2023-05-05

5rgfhyps5#

一个简单的解决方案，支持换行符，并在IE 8+，FF和Chrome中工作。当点直接放在空格填充点div中时，支持8以下的IE。
CSS是

.spacefill,
.spacefill-dots {
  line-height: 18px;
  font-size: 16px;
}

.spacefill {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
}

.spacefill-dots {
  z-index: -1;
  /* Push dots behind text */
  height: 18px;
  /* Same as line-height */
  border: 0;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  overflow: hidden;
}

.spacefill-text {
  background: white;
  /* Very important. Choose backgroundcolor*/
  padding-right: 4px;
  /* Optional space before first point*/
}

.spacefill .spacefill-dots::after {
  content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................"
}

HTML是：

<div class="spacefill">
   <div class="spacefill-dots"></div>
   <span class="spacefill-text">Short title</span>
</div>

下面是一个简单的contents表示例：https://jsfiddle.net/dua2tp11/

赞(0）回复(0）举报 2023-05-05

rdlzhqv96#

1.找到三个空格的第一个示例。我假设这是构成“中断”所需的最低数量
1.找到之后的第一个非空格字符。
1.替换#1（+1）中的索引和#2（-1）中的索引之间的所有空格。这将给予你上面的结果。
查看其他答案，了解更多使用CSS的干净方法。这将是显示文本的最干净的方式。破折号看起来像贫民窟。：）

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 使用点或连字符填充标签之间的可用空间

6条答案

相关问题

热门标签

最新问答