Как отобразить текст, пунктирную линию, затем больше текста, охватывающего ширину страницы?

Я хотел бы отобразить некоторый текст, затем пунктирную линию, а затем еще текст в той же строке на странице HTML, например.

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

Я хочу, чтобы "Имя" оставалось оправданным на левой границе, а "Инженер" - правым, оправданным на правой границе, а затем браузером, чтобы иметь возможность заполнить промежуток между ними повторяющимися точками.

Я пробовал несколько разных способов заставить это работать с помощью CSS и HTML, но не могу понять это правильно. Я не хочу указывать ширину (фактическую или процентную) каждого компонента, чтобы решение было повторно использовано со словами разной длины, например. то же решение будет работать с:

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

Надеюсь, что этот вопрос имеет смысл, любой совет оценил, спасибо.

ОТВЕТЫ

Ответ 1

Я бы предположил, что, возможно, a 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 (точный):

Это не делает то, что попросил ОП? Это просто дает пунктирное подчеркивание (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.

Обновленная демонстрация JS Fiddle.

Ответ 2

Простое решение без изображения

DEMO

Выход:

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

Это решение перемещает оба текста, а нижняя граница с пунктиром расширяется до оставшейся ширины. Вот соответствующий код:

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

Ответ 3

В современных браузерах это может быть достигнуто с помощью гибкого дисплея. Flex-box имеет свойство flex-grow, которое указывает, как свободное пространство должно быть распределено между элементами, когда их общий размер меньше, чем контейнер размер. Источник для объяснения - это ответ cimmanon здесь.

Назначая 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>

Ответ 4

Я не хочу признавать это, но я нашел отличное решение на сайте 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

Ответ 5

Мое решение - использовать 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;}

Пример: http://jsfiddle.net/PyCnT/

Строка имеет position:relative; и фиксированную ширину. Любые дети span будут иметь position:absolute; и используя left:0 и right:0, диапазон перемещается в нужном месте. Добавление background:white переопределяет точки, которые находятся на фоне span.

Ответ 6

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