Как создать css-макет «линии метро» без названия станции или линии
У меня есть множество линий метро и станций. Что я хочу сделать, так это отобразить line names on the up center of line и station names right below the station, а линии и станции связаны.
Важно то, что line names shouldn't exceed line, and shouldn't cover other line names и station names should also not cover other station names, независимо от того, насколько длинными являются названия станций или названий линий.
Теперь проблема если название станции слишком длинное, оно закроет другие названия станций.
.main{
margin-top: 32px;
margin-left: 32px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
}
.line{
height: 2px;
min-width: 32px;
border-bottom: 2px solid;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.line-name{
margin: -20px 16px 0;
}
.station{
height: 8px;
width: 8px;
border-radius: 50%;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.station-name {
margin: 0 16px -20px;
white-space: nowrap;
}
<div class = "main">
<div class = "station">
<span class = "station-name">first station</span>
</div>
<div class = "line">
<span class = "line-name">short line</span>
</div>
<div class = "station">
<span class = "station-name">loooooong station name</span>
</div>
<div class = "line">
<span class = "line-name">very very very very loooooooong line name</span>
</div>
<div class = "station">
<span class = "station-name">this on name</span>
</div>
</div>
Целевой эффект здесь текущий код здесь: https://jsfiddle.net/ueq21afw/, и название станции перекрывают друг друга. Может ли кто-нибудь помочь мне в этом? Благодарю.
Добавлено фото @HassanSiddiqui
Наконец, я использовал холст для решения этой проблемы, который может получить ширину текста до его вставки.
Ответы 3
Я пробовал структурировать html-код по-другому. https://jsbin.com/gapecapopo/edit?html, css, вывод
.main {
display: flex;
}
.column {
/* flex: 1; */
background-color: #EEE;
flex-grow: 1;
}
.line {
border-bottom: 2px solid #000;
}
.line::before {
content: 'o';
position:relative;
bottom: -8px;
}
.station-name {
text-align: center;
}<div class = "main">
<div class = "column">
<div class = "station-name">This station aaaa have very long name</div>
<div class = "line"></div>
<div class = "line-name">line a</div>
</div>
<div class = "column">
<div class = "station-name">station b short</div>
<div class = "line"></div>
<div class = "line-name">line b</div>
</div>
<div class = "column">
<div class = "station-name">this station cccc have very long nameee</div>
<div class = "line"></div>
<div class = "line-name">line c</div>
</div>
</div>спасибо, но когда название станции очень длинное, очередь тоже должна расти
@user2306775 user2306775, кажется, тоже хорошо растет.
Я попробовал довольно длинное название станции, оно не сработало. И я добавил свой код, который также имеет проблему, когда имя станции становится очень длинным: jsfiddle.net/ueq21afw
Кажется, я не совсем ясно выразился, название линии должно располагаться вверху посередине строки, а название станции должно располагаться прямо под станцией, и при увеличении названия линии оно не должно превышать ширину строки, а когда название станции увеличивается, оно не должно перекрывать другие названия станций. В вашем примере, когда имена под точками становятся слишком длинными, кажется, что это работает не совсем хорошо.
Я просто обновляю ваш код несколькими изменениями CSS и структура. Попробуйте это, я надеюсь, что это поможет вам. Спасибо
ul {
display: table;
margin: 50px 0 0;
padding: 0;
list-style: none;
height: 40px;
}
li {
display: table-cell;
vertical-align: top;
padding: 0 5px;
margin: 5px 0;
position:relative;
white-space: nowrap;
}
li:after {
background-color: #000;
content: '';
height: 1px;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
li.station {
vertical-align: bottom;
}
li.station:before {
background-color: #fff;
border-radius: 50%;
border: 1px solid black;
content: '';
height: 5px;
width: 5px;
position: absolute;
top: calc(50% - 3px);
left: calc(50% - 3px);
z-index: 1;
}
li.station:last-child:after {
width: 50%;
}<ul>
<li>Line Text 1</li>
<li class = "station">Station Name 1</li>
<li>Line Text 2</li>
<li class = "station">Station Name 2</li>
<li>Line Text 3</li>
<li class = "station">Station Name 3Station Name 3Station Name 3Station Name 3Station Name 3Station Name 3</li>
</ul>спасибо за ваш ответ, но в вашем коде, когда имя станции становится довольно длинным, оно превращается в несколько строк, что нарушает всю структуру, есть ли какое-либо предлагаемое решение?
@yuant Я только что обновил приведенный выше фрагмент кода. Теперь, если текст станции/линии становится слишком длинным, он останется на одной строке. Спасибо
название станции и название линии должны пересекаться друг с другом по горизонтали. Наконец, я использовал холст, который может заранее получить ширину текста. В любом случае, большое спасибо
Наконец, я решил это с помощью холста.
- Сначала я создал холст.
- Затем я вставляю все тексты (например:
今日の天気 Station) в холст и сохраняю их в массиве. - Тем временем я получил длины всех вновь вставленных текстов. Делая все вышеперечисленное, я могу рассчитать, в какую позицию я должен поместить текст, круги и линии. И я нарисовал все элементы.
Пожалуйста, поделитесь любым скриншотом для требуемого стиля и структуры. Спасибо