Html 如何显示文本、虚线和跨越页面宽度的更多文本？

Question

提问by CodeClimber

I'd like to display some text then a dotted line then some more text on the same line on a HTML page e.g.

我想显示一些文本，然后是一条虚线，然后是 HTML 页面上同一行上的更多文本，例如

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

I want the "Name" to be left justified against the left border and "Engineer" to be right justified against the right border and then the browser to be able to fill the gap between the two with repeating dots.

我希望“名称”靠左边框左对齐，“工程师”靠右边框右对齐，然后浏览器能够用重复点填充两者之间的间隙。

I've tried a good few different ways to get this to work using CSS and HTML but can't quite get it right. I don't want to have to specify the width (actual or percentage) of each component so that the solution is re-usable with words of different lengths e.g. the same solution would work with:

我已经尝试了几种不同的方法来使用 CSS 和 HTML 使其工作，但不能完全正确。我不想指定每个组件的宽度（实际或百分比），以便该解决方案可与不同长度的单词一起使用，例如相同的解决方案将适用于：

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

Hope this question makes sense, any advice appreciated, thanks.

希望这个问题是有道理的，任何建议表示赞赏，谢谢。

Answer 1

采纳答案by David says reinstate Monica

I'd suggest that, perhaps, a ulwould be one option:

我建议，也许，aul将是一种选择：

<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:

CSS：

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

span.defined {
    float: right;
}

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

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

JS Fiddle demo.

JS小提琴演示。

Editedto correct the CSS. Andthe HTML. Oops.

编辑以更正 CSS。和HTML。哎呀。

Editedin response to @Leigh's (accurate) comment:

编辑响应@ Leigh的（准确）的评论：

This isn't doing what the OP asked for? This just gives a dotted underline (FF 3.5), not dots between the two pieces of text.

这不是按照 OP 的要求进行的吗？这只是给出了一个虚线下划线（FF 3.5），而不是两段文本之间的点。

I've adjusted the CSS a little to hide the dotted border under the spans:

我稍微调整了 CSS 以隐藏spans下的虚线边框：

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;
}

Admittedly this is only tested in Chrome 8, and Firefox 3.6, Ubuntu 10.10.

诚然，这仅在 Chrome 8、Firefox 3.6、Ubuntu 10.10 中进行了测试。

Updated JS Fiddle demo.

更新了 JS Fiddle 演示。

Answer 2

回答by web-tiki

Simple solution with no image

没有图像的简单解决方案

DEMO

演示

Output :

输出：

Responsive dotted line between text on the right and on the left

左右文本之间的响应虚线

This solution floats both texts and the dotted bottom border expands to the remaining width. Here is the relevant code :

此解决方案浮动两个文本，虚线底部边框扩展到剩余宽度。这是相关的代码：

HTML :

<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>

CSS :

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;
}

Answer 3

回答by Harry

In modern browsers, this can be achieved by using flex-box display. Flex-boxes have a flex-growproperty which specifies how the free space should be distributed among the elements when their total size is smaller than the container size. Source for the explanation is cimmanon's answer here.

在现代浏览器中，这可以通过使用 flex-box display 来实现。Flex-boxes 有一个flex-grow属性，它指定当元素的总大小小于容器大小时如何在元素之间分配可用空间。解释的来源是这里 cimmanon 的回答。

By assigning a flex-growto only the element which produces the dots would mean that the entire remaining space would by default be used up by it.

通过flex-grow仅将 a 分配给产生点的元素将意味着默认情况下整个剩余空间将被它用完。

The dots in the middle could either be produced using (a) radial gradients or (b) border. I prefer the radial gradients because they allow greater control in terms of the space between each dot and its size. Radial gradients have low browser support but that shouldn't be a big concern here because it is equal to the support for Flexbox (if not better).

中间的点可以使用 (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>

Browser Specific Customizations:

浏览器特定的自定义：

IE11 does not support flex-growproperty on a pseudo-element. Hence we have to introduce an extra spanfor the dots in between the left and right span. A samplecan be found here.
IE10 has a different syntax for flexbox and other properties. Hereis a sample for it.
Safari (5.1.7 and earlier on Windows) does not support flexbox on spantag and hence they need to be replaced with divtags (or display: blockneeds to be set). Also, Safari versions older than 6.1 do not support flex-growproperty. This samplehas an implementation for those versions.

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

Final Output:

最终输出：

Putting all the various pieces together, this sampleworks in IE10, IE11, Chrome, Opera, Firefox and Safari (in essence, all versions that support flexbox). This approach works well with imageand gradient backgrounds also.

将所有不同的部分放在一起，这个示例适用于 IE10、IE11、Chrome、Opera、Firefox 和 Safari（本质上是所有支持 flexbox 的版本）。这种方法也适用于图像和渐变背景。

Browser Support:Flexbox| Gradients

浏览器支持：Flexbox| 渐变

Answer 4

回答by Pepijn Olivier

I don't want to take credit for this, but I found a great solution over at codingforums.com

我不想因此而受到赞扬，但我在codingforums.com上找到了一个很好的解决方案

I've made a JSFiddle out of it.

我已经用它制作了一个 JSFiddle。

http://jsfiddle.net/DeDRE/9/

(dotted lines are done with an image: dot.gif. If you don't see any dotted lines at the time you're reading this, the host I've currently used must have taken the image offline)

（虚线是用图片完成的：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>

Original source - http://www.codingforums.com/showpost.php?p=578354&postcount=4

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

Answer 5

回答by Sotiris

My solution is use postion:relative;and position:absolute;

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

html

<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>

css

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

Example:http://jsfiddle.net/PyCnT/

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

The row has position:relative;and a fixed width. Any spanchildren will will have position:absolute;and using left:0& right:0the span moved in the correct place. Adding a background:whiteoverride the dots that are in the background of the span.

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

Answer 6

回答by Idered

<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;
    }

Preview: http://jsfiddle.net/E7cyB/1/

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

Html 如何显示文本、虚线和跨越页面宽度的更多文本？

提问by CodeClimber

采纳答案by David says reinstate Monica

回答by web-tiki

Simple solution with no image

没有图像的简单解决方案

回答by Harry

回答by Pepijn Olivier

回答by Sotiris

回答by Idered

相关推荐

最近更新

标签

Html 如何显示文本、虚线和跨越页面宽度的更多文本？

提问by CodeClimber

采纳答案by David says reinstate Monica

回答by web-tiki

Simple solution with no image

没有图像的简单解决方案

回答by Harry

回答by Pepijn Olivier

回答by Sotiris

回答by Idered

相关推荐

Html 在 CSS 中使用多个 @font-face 规则

Html 如何使用 twitter bootstrap 正确对齐元素？

Html 使一个 div 填满剩余的宽度

Html css child padding 使它在父边绘制

相关推荐

最近更新

标签