css 显示文本，虚线，然后更多的文本跨越页面的宽度[重复]

vojdkbi0  于 2023-04-08  发布在  其他
关注(0)|答案(6)|浏览(126)

此问题已在此处有答案：

Create leading dots in CSS（18回答）
7小时前关闭
我想显示一些文本，然后虚线，然后一些更多的文本在同一行在HTML页面上，例如。

Name: .......................................................... (Engineer)

我希望“名称”是左对齐对左边界和“工程师”是右对齐对右边界，然后浏览器能够填补两者之间差距与重复的点。
我已经尝试了很多不同的方法来使用CSS和HTML来实现这一点，但都不能完全正确。我不想指定每个组件的宽度（实际或百分比），以便解决方案可以重用不同长度的单词，例如，相同的解决方案可以使用：

Factory Location: .................................... (Not invoice address)
css

6条答案

按热度按时间
nzrxty8p

nzrxty8p1#

在现代浏览器中，这可以通过使用flex-box显示来实现。Flex-box具有flex-grow属性，该属性指定当元素的总大小小于容器大小时，如何在元素之间分配空闲空间。Source for the explanation is cimmanon's answer here.
通过将flex-grow仅分配给产生点的元素，意味着默认情况下整个剩余空间将被它用完。
中间的点可以使用（a）径向渐变或（b）边框来生成。我更喜欢径向渐变，因为它们允许更好地控制每个点之间的空间及其大小。径向渐变对浏览器的支持较低，但这不应该是一个大问题，因为它等于对Flexbox的支持（如果不是更好）。

.container {
  width: 500px;
  height: 200px;
  background: -webkit-linear-gradient(0deg, brown, chocolate);
  background: -moz-linear-gradient(0deg, brown, chocolate);
  background: linear-gradient(0deg, brown, chocolate);
  color: beige;
  padding: 10px;
}
.row {
  line-height: 2em;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.row .left {
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  order: 1;
}
.row .right {
  -webkit-order: 3;
  -moz-order: 3;
  -ms-order: 3;
  order: 3;
}
.row .right:before {
  content: "(";
}
.row .right:after {
  content: ")";
}
.row:after {
  content: "";
  margin: 0px 4px;
  background: -webkit-radial-gradient(50% 50%, circle, beige 12%, transparent 15%);
  background: -moz-radial-gradient(50% 50%, circle, beige 12%, transparent 15%);
  background: radial-gradient(circle at 50% 50%, beige 12%, transparent 15%);
  background-size: 1em 1em;
  background-position: 0 0.5em;
  background-repeat: repeat-x;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  order: 2;
}
<div class="container">
  <div class="row">
    <span class="left">Something</span>
    <span class="right">Something else</span>
  </div>
  <div class="row">
    <span class="left">Something lengthy</span>
    <span class="right">Something else lengthy</span> 
  </div>
</div>

浏览器自定义：

  • IE11不支持伪元素的flex-grow属性。因此，我们必须为左右跨度之间的点引入额外的span。可以在这里找到sample。
  • IE10对flexbox和其他属性有不同的语法。Here是它的一个示例。
  • Safari（Windows上的5.1.7及更早版本）不支持span标记上的flexbox，因此需要将其替换为div标记（或需要设置display: block）。此外，6.1之前的Safari版本不支持flex-grow属性。This sample有这些版本的实现。
    最终输出：

把所有不同的部分放在一起，this sample可以在IE10，IE11，Chrome，Opera，Firefox和Safari（本质上，所有支持flexbox的版本）中工作。这种方法也可以在works well with image和渐变背景中工作。

**浏览器支持：**Flexbox|梯度

赞(0）分享  回复(0）举报  2023-04-08
ryevplcw

ryevplcw2#

这里有一个解决方案，在一行上显示两个文本之间的虚线。它使用display: flex;属性将虚线和左右文本对齐：

.wrap {
  display: flex;
}

.left {
  flex: 1;
  display: flex;
}

.left::after {
  content: '';
  border-bottom: 1px dotted;
  flex: 1;
  margin: 0 .5em;
}
<div class="wrap">
  <span class="left">Name :</span>
  <span class="right">Engineer</span>
</div>
<div class="wrap">
  <span class="left">Factory location :</span>
  <span class="right">(not invoice address)</span>
</div>

上一个带浮点数的答案：

  • 输出：*

这个解决方案浮动两个文本，虚线底部边框扩展到剩余的宽度。

div {
  height: 1em;
}

.left,
.right {
  padding: 1px 0.5em;
  background: #fff;
  float: right;
}

.left {
  float: left;
  clear: both;
}

.dotted {
  border-bottom: 1px dotted grey;
  margin-bottom: 2px;
}
<div class="left">Name:</div>
<div class="right">Engineer</div>
<div class="dotted"></div>
<div class="left">Factory location:</div>
<div class="right">not invoice address</div>
<div class="dotted"></div>
赞(0）分享  回复(0）举报  2023-04-08
jfgube3f

jfgube3f3#

我建议，也许ul是一个选择：

<ul>
    <li><span class="definition">Name:</span><span class="defined">Engineer</span></li>
    <li><span class="definition">Factory location:</span><span class="defined">not invoice address</span></li>
</ul>

CSS：

ul li {
    border-bottom: 2px dotted #ccc;
}

span.defined {
    float: right;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

JS Fiddle demo。

编辑以更正CSS。* 和 * HTML。哎呀。
编辑以回应@Leigh的（准确）评论：

这不是OP所要求的吗？这只是给出了一个点下划线（FF 3.5），而不是两段文字之间的点。
我调整了一下CSS，隐藏了span s下的虚线边框：

ul li {
    border-bottom: 2px dotted #ccc;
    line-height: 2em;
    text-align: right;
    clear: both;
    margin: 0.5em 0 0 0;
}

span.definition {
    float: left;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

span {
    display: inline-block;
    border: 2px solid #fff;
    padding: 0;
    margin: 0 0 -2px 0;
}

诚然，这只在Chrome 8和Firefox 3.6，Ubuntu 10.10中进行了测试。
Updated JS Fiddle demo。

赞(0）分享  回复(0）举报  2023-04-08
ifmq2ha2

ifmq2ha24#

我不想把功劳归于自己，但我在www.example.com上找到了一个很好的解决方案codingforums.com
我已经做了一个JSFiddle了。
http://jsfiddle.net/DeDRE/9/
（虚线是用一张图片做的：dot.gif。如果你在阅读这篇文章的时候没有看到任何虚线，那么我现在使用的主机一定是把这张图片离线了）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn-US">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo CF108909</title>
    <meta name="Author" content="Patrick Garies">
    <meta name="Created" content="2007-03-03">
    <meta name="Revised" content="2007-06-19">
    <style type="text/css">
        * { margin: 0; padding: 0; }
        html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
        html, tbody th, span {  background: #f7f7ee; }
        table, caption { margin: 0 auto; } /* Application to the caption element addresses Mozilla Bug 297676. */
        table { border-collapse: collapse; }
        caption, th, td { padding: 0.1em 0; }
        caption { text-align: center; font-weight: bolder; }
        thead { display: none; }
        tbody tr { background: url("http://www.myresult.co/images/dot.gif") 0 78% repeat-x; }
        tbody th, td + td { text-align: right; }
        tbody th { padding-right: 0.4em; font-weight: normal; }
        td + td { padding-left: 0.4em; }
        cite { font-style: normal; }
        span { padding: 0 0.2em; white-space: pre; }
    </style>

</head>
<body>

    <table>
        <caption><cite>Dragonseye</cite> Table of Contents</caption>
        <col>
        <col>
        <col>
        <thead>
            <tr>
                <th scope="col" abbr="Chapter">Chapter Number</th>
                <th scope="col" abbr="Title">Chapter Title</th>
                <th scope="col" abbr="Page">Initial Page Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row"></th>
                <td><span>Prologue</span></td>
                <td><span>1</span></td>
            </tr>
            <tr>
                <th scope="row">1</th>
                <td><span>Early Autumn at Fort’s Gather</span></td>
                <td><span>4</span></td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td><span>Gather at Fort</span></td>
                <td><span>49</span></td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td><span>Late Fall at Telgar Weyr</span></td>
                <td><span>64</span></td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td><span>Telgar Weyr and the College</span></td>
                <td><span>87</span></td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td><span>Weyrling Barracks and Bitra Hold</span></td>
                <td><span>104</span></td>
            </tr>
            <tr>
                <th scope="row">6</th>
                <td><span>Telgar Weyr, Fort Hold</span></td>
                <td><span>138</span></td>
            </tr>
            <tr>
                <th scope="row">7</th>
                <td><span>Fort Hold</span></td>
                <td><span>162</span></td>
            </tr>
            <tr>
                <th scope="row">8</th>
                <td><span>Telgar Weyr</span></td>
                <td><span>183</span></td>
            </tr>
            <tr>
                <th scope="row">9</th>
                <td><span>Fort Hold and Bitran Borders, Early Winter</span></td>
                <td><span>197</span></td>
            </tr>
            <tr>
                <th scope="row">10</th>
                <td><span>High Reaches, Boll, Ista Weyrs; High Reaches Weyr, Fort, and Telgar Holds</span></td>
                <td><span>217</span></td>
            </tr>
            <tr>
                <th scope="row">11</th>
                <td><span>The Trials at Telgar and Benden Weyrs</span></td>
                <td><span>238</span></td>
            </tr>
            <tr>
                <th scope="row">12</th>
                <td><span>High Reaches and Fort Holds</span></td>
                <td><span>261</span></td>
            </tr>
            <tr>
                <th scope="row">13</th>
                <td><span>Bitra Hold and Telgar Weyr</span></td>
                <td><span>278</span></td>
            </tr>
            <tr>
                <th scope="row">14</th>
                <td><span>Turn’s End at Fort Hold and Telgar Weyr</span></td>
                <td><span>300</span></td>
            </tr>
            <tr>
                <th scope="row">15</th>
                <td><span>New Year 258 After Landing; College, Benden Hold, Telgar Weyr</span></td>
                <td><span>327</span></td>
            </tr>
            <tr>
                <th scope="row">16</th>
                <td><span>Cathay, Telgar Weyr, Bitra Hold, Telgar</span></td>
                <td><span>348</span></td>
            </tr>
            <tr>
                <th scope="row">17</th>
                <td><span>Threadfall</span></td>
                <td><span>379</span></td>
            </tr>
        </tbody>
    </table>

</body>
</html>

来源：http://www.codingforums.com/showpost.php?p=578354&postcount=4

赞(0）分享  回复(0）举报  2023-04-08
tsm1rwdh

tsm1rwdh5#

我的解决方案是使用postion:relative;和position:absolute;
联系我们

<div class="row">.............................................................................................................................<span class="left">Name:</span><span class="right">(Engineer)</span></div>
<div class="row">.............................................................................................................................<span class="left">Factory Location:</span><span class="right">(Not invoice address)</span></div>

联系我们

.row {width:500px;position:relative;}
.left {position:absolute;left:0;background:white;}
.right {position:absolute;right:0;background:white;}

示例：http://jsfiddle.net/PyCnT/

行有position:relative;和一个固定的宽度。任何span的孩子将有position:absolute;，并使用left:0和right:0将跨度移动到正确的位置。添加background:white覆盖了span背景中的点。

赞(0）分享  回复(0）举报  2023-04-08
iezvtpos

iezvtpos6#

<p class="dotbg"><span>Left</span><span class="right">Right</span></p>
<p class="dotbg"><span>Some text</span><span class="right">some bad text</span></p>
.dotbg{
    line-height: 12px;
    background: url('http://i.stack.imgur.com/L8CQg.png') bottom repeat-x;    
    width: 250px; /* this is only for showcase */
    margin: 0 auto 1.5em auto; /* this is only for showcase */

}
    .dotbg span{
        padding: 0 5px; 
        background: #fff;
    }
    .dotbg .right{
        float: right;
    }

预览：http://jsfiddle.net/E7cyB/1/

赞(0）分享  回复(0）举报  2023-04-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com