简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
標題重寫為：彈性盒子選單和帶有標題的表格 - 是否能根據表格寬度截斷標題？
P粉642920522
P粉642920522 2023-09-06 17:30:06
0
1
408

我想透過使用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粉642920522
P粉642920522

全部回覆(1)
P粉512526720
P粉5125267202023-09-07 00:41:19 1樓

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

我唯一能想到的方法是將標題文字包裹在適當的元素中- 在這個例子中是<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
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！