如何设计 css "metro line" 没有车站或线路名称覆盖的布局

Question

我有一系列地铁线路和车站。我要做的是显示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，无论站名或线路名多长。现在的问题是站名太长会覆盖其他站名。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>.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>

Answer 1

我尝试以其他方式构建 html 代码。 https://jsbin.com/gapecapopo/edit?html,css,output

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

Answer 2

我只是对您的代码进行了一些 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>

Answer 3

最后我用 canvas 解决了这个问题。

我先创建了一个canvas。
然后我将所有文本（例如：今日の天気 Station）插入到 canvas 中，并将它们保存在一个数组中。
同时我得到了所有新插入文本的长度。通过以上所有这些，我可以计算出我应该把文本、圆圈和线条放在哪个位置。我画了所有的元素。

如何设计 css "metro line" 没有车站或线路名称覆盖的布局

How to design css layout of "metro line" without station or line name cover

html

css

less