搜尋

首頁  >  問答  >  主體

標題重寫為:彈性盒子選單和帶有標題的表格 - 是否能根據表格寬度截斷標題?

我想透過使用flexbox CSS來實現類似這樣的效果。選單是固定寬度的,但是表格可以自動增長,而標題不應超過表格寬度,即使它很長。換句話說,表格應該能夠拉伸列容器,但標題不應該。

+----+--------+
|菜单| 标题   |
|    +--------+
|    | 表格   |
+----+--------+

只需要一個flex列就可以輕鬆實現。

<html>
<style>
    td {
        font-size: 60px;
    }
    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
    }
    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;
    }
    .item2 {
        background-color: blue;
    }
</style>
<body>
<div class="container">
  <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
  <div class="item2">
    <table>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

但是當新增選單後,​​一切都不正常,標題沒有被截斷。

<html>
<style>
    .main {
        display: flex;
    }
    .menu {
        background-color: #222222;
        width: 200px;
    }
    td {
        font-size: 60px;
    }
    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;
    }
    .item2 {
        background-color: blue;
    }
</style>
<body>
<div class="main">
  <div class="menu">
    菜单
  </div>
  <div class="container">
    <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
    <div class="item2">
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>
P粉642920522P粉642920522502 天前470

全部回覆(1)我來回復

  • P粉512526720

    P粉5125267202023-09-07 00:41:19

    所以你希望包含標題的元素能夠隨其兄弟元素的大小而變化,但不影響其自身的子元素。

    我唯一能想到的方法是將標題文字包裹在適當的元素中- 在這個例子中是<span> - 然後使用position: absolute將其從流中取出,並在標題的父元素上使用position: relative。然後你需要為標題設定一些高度。

    範例

    我用flex: 0 0 200px替換了寬度。這將使選單不會隨著大小而變化,始終保持在200px。

    .main {
      display: flex;
    }
    
    .menu {
      background-color: #222222;
      flex: 0 0 200px; /*改变了*/
    }
    
    td {
      font-size: 60px;
    }
    
    .container {
      font-size: 60px;
      background-color: yellow;
      display: flex;
      flex-direction: column;
      width: maxwidth; /*将宽度改为maxwidth*/
    }
    
    .item1 {
      background-color: red;
      white-space: nowrap;
      overflow: hidden;
      position: relative; /*添加了*/
      height: 1.2em; /*添加了*/
    }
    
    .item1 span {
      position: absolute; /*添加了*/
    }
    
    .item2 {
      background-color: blue;
    }
    <div class="main">
      <div class="menu">
        菜单
      </div>
    
      <div class="container">
        <div class="item1"><span>The quick brown fox jumped over the lazy dog</span></div>
        <div class="item2">
          <table>
            <tr>
              <td>数据</td>
              <td>数据</td>
              <td>数据</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    回覆
    0
  • 取消回覆