HTML + CSSでテキストを最大2行に強制し、幅を広げる

Question

親の属性にdisplay:flex;のリスト（li）要素で水平なタイムラインを作成しました。それはリストを水平にします。しかし、私はテキストをボックス内で最大2行にしたい。最初

アスファルトが配信

ある

：

だから例えば、私はこれをしたいです。

最初のアスファルト

が配信される：このなるために

。

私はこれをルールにして、幅が必要なほど広くなることができます。

そして、解決策がoverflow:hiddenで動作する例はたくさんあります。しかし、それは私が探しているものではありません。私はすべてのテキストが見えるように動的な幅を取得する方法があるかどうかを知りたい。

編集：ここ

がスニペットである：

.left-arrow,.right-arrow { 
 
    float:left; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    margin-top:20px; 
 
    cursor:pointer; 
 
} 
 
.left-arrow { 
 
    border-right:20px solid black; 
 
    padding-left: 5px; 
 
} 
 
.right-arrow { 
 
    border-left:20px solid black; 
 
    padding-right: 5px; 
 
} 
 
.timeline { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: left; 
 
    margin: 0 5px; 
 
    padding: 0; 
 
    float: left; 
 
    width: calc(100% - 60px); 
 
    overflow-x: scroll; 
 
    vertical-align: top; 
 
} 
 
.timeline li { 
 
    width: 300px; 
 
    vertical-align: top; 
 
} 
 
.timeline li a { 
 
    color: #000; 
 
} 
 
.timestamp { 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    white-space: nowrap; 
 
    font-weight: 600; 
 
} 
 
.status { 
 
    padding: 10px 5px 10px; 
 
    display: flex; 
 
    justify-content: center; 
 
    border-top: 3px solid #000; 
 
    position: relative; 
 
    font-size: 1.1rem; 
 
} 
 
.status:before { 
 
    content: ""; 
 
    width: 4px; 
 
    height: 8px; 
 
    background-color: black; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: calc(50% - (4px/2)); 
 
}

<a href="#" class="left-arrow" data-role="none"></a> 
 
<ul class="timeline" id="timeline"> 
 
    <li> 
 
    <a href="#pop-1910-20"> 
 
     <div class="timestamp">1910-20</div> 
 
     <div class="status">The founder buys land.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1928"> 
 
     <div class="timestamp">1928</div> 
 
     <div class="status">The refinery goes into operation.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1929"> 
 
     <div class="timestamp">1929</div> 
 
     <div class="status">The first asphalt is delivered.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1931"> 
 
     <div class="timestamp">1931</div> 
 
     <div class="status">New cracker.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1939-45"> 
 
     <div class="timestamp">1939-45</div> 
 
     <div class="status">Central role for the national sales</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1950s"> 
 
     <div class="timestamp">1950-talet</div> 
 
     <div class="status">The network of petrol stations is being expanded</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1956"> 
 
     <div class="timestamp">1956</div> 
 
     <div class="status">The second refinery is finished</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1958"> 
 
     <div class="timestamp">1958</div> 
 
     <div class="status">The founder dies.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1960"> 
 
     <div class="timestamp">1960</div> 
 
     <div class="status">Risky sales strategy</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1967-69"> 
 
     <div class="timestamp">1967-69</div> 
 
     <div class="status">Increased capacity of bitumen</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1974"> 
 
     <div class="timestamp">1974</div> 
 
     <div class="status">The energy crisis leads to financial crisis</div> 
 
    </a> 
 
    </li> 
 
</ul> 
 
<a href="#" class="right-arrow" data-role="none"></a>

Answer 1

我々はまた、高さを固定することによってLI要素のための2つの行を修正し、そしてによる行の高さができその半分。だから2行しか来ることはできませんが、幅は最大にすることができます。それで2つの線があるが、それはx側に広がるだろう。それは以下のリンクのようなものになります。

.twolines{ 
 
    height: 50px; 
 
    line-height: 25px; 
 
    width: 100%; 
 
    overflow-y: hidden; 
 
}

<ul> 
 
<li class="twolines">Hello World. If it has two lines but have max width it can to be produced so that it will not expanded. Some extra text will be truncated when even two lines exceeded</li> 
 
<li class="twolines">Hello World. If it has two lines but have max width it can to be produced so that it will not expanded.</li> 
 

 
</ul>

Answer 2

コードスニペットを撮影し、高さと行の高さの同じロジックを使用していました。そのようなボックスサイズのボーダーボックスに加えて、いくつかの配置（パディングやボーダーのような）があったので、幅も制御されます。

.left-arrow,.right-arrow { 
 
    float:left; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    margin-top:20px; 
 
    cursor:pointer; 
 
} 
 
.left-arrow { 
 
    border-right:20px solid black; 
 
    padding-left: 5px; 
 
} 
 
.right-arrow { 
 
    border-left:20px solid black; 
 
    padding-right: 5px; 
 
} 
 
.timeline { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: left; 
 
    margin: 0 5px; 
 
    padding: 0; 
 
    float: left; 
 
    width: calc(100% - 60px); 
 
    overflow-x: scroll; 
 
    vertical-align: top; 
 
} 
 
.timeline li { 
 
    width: 300px; 
 
    vertical-align: top; 
 
} 
 
.timeline li a { 
 
    color: #000; 
 
} 
 
.timestamp { 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    white-space: nowrap; 
 
    font-weight: 600; 
 
} 
 
.status { 
 
    padding: 10px 5px 10px; 
 
    display: flex; 
 
    justify-content: center; 
 
    border-top: 3px solid #000; 
 
    position: relative; 
 
    font-size: 1.1rem; 
 
    box-sizing: border-box; 
 
    height: 43px; 
 
    line-height: 15px; 
 
    width: 213px; 
 
} 
 
.status:before { 
 
    content: ""; 
 
    width: 4px; 
 
    height: 8px; 
 
    background-color: black; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: calc(50% - (4px/2)); 
 
}

<a href="#" class="left-arrow" data-role="none"></a> 
 
<ul class="timeline" id="timeline"> 
 
    <li> 
 
    <a href="#pop-1910-20"> 
 
     <div class="timestamp">1910-20</div> 
 
     <div class="status">The founder buys land.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1928"> 
 
     <div class="timestamp">1928</div> 
 
     <div class="status">The refinery goes into operation.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1929"> 
 
     <div class="timestamp">1929</div> 
 
     <div class="status">The first asphalt is delivered.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1931"> 
 
     <div class="timestamp">1931</div> 
 
     <div class="status">New cracker.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1939-45"> 
 
     <div class="timestamp">1939-45</div> 
 
     <div class="status">Central role for the national sales</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1950s"> 
 
     <div class="timestamp">1950-talet</div> 
 
     <div class="status">The network of petrol stations is being expanded</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1956"> 
 
     <div class="timestamp">1956</div> 
 
     <div class="status">The second refinery is finished</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1958"> 
 
     <div class="timestamp">1958</div> 
 
     <div class="status">The founder dies.</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1960"> 
 
     <div class="timestamp">1960</div> 
 
     <div class="status">Risky sales strategy</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1967-69"> 
 
     <div class="timestamp">1967-69</div> 
 
     <div class="status">Increased capacity of bitumen</div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#pop-1974"> 
 
     <div class="timestamp">1974</div> 
 
     <div class="status">The energy crisis leads to financial crisis</div> 
 
    </a> 
 
    </li> 
 
</ul> 
 
<a href="#" class="right-arrow" data-role="none"></a>