Как отобразить текст, пунктирную линию, затем больше текста, охватывающего ширину страницы?
Я хотел бы отобразить некоторый текст, затем пунктирную линию, а затем еще текст в той же строке на странице 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/
