时间戳

首页 > 解决方案 > 基于文本长度的 CSS DIV 宽度，相对于 TABLE 单元格的绝对位置

css - 基于文本长度的 CSS DIV 宽度，相对于 TABLE 单元格的绝对位置

问题描述

简介：经过我的尝试，我已经达到了可以接受的结果

到我设置内联的特定表格单元格（在下面的屏幕截图中，它是倒数第三个）

<th style="position:relative;">Column Name</th>

然后在单元格内我已经定位了我的 DIV

<th style="position:relative;"><div id="myDiv" style="position:relative;">Line 1 - medium length<br>Line2 - John</div></th>

编辑：根据要求，我发布了重要的代码

DIV CSS

#provDiv{  /** the DIV CSS */
    position: absolute; 
    top: 0; 
    right: 0; 
    width: auto;  
    background: greenyellow;  
    text-align: right;
  }

涉及的细胞，

<th data-dbrow="device" scope="col" 
style="position:relative; width: 10%">
    <div id="provDiv">Line 1 - medium length<br>Line 2 - John</div>
</th>

发生的事情是（我会说“显然”）DIV长文本将换行，因为DIV将具有最大宽度->表格列的宽度，这使用width: auto;

而如果我设置width: 300pxDIV 宽度真的是 300px

使用固定宽度，我的 DIV 大于列宽，

但是div总是大300px，尽管有内容，

因此，如果 DIV innerText 只是 5 个字符，如“hello”，我有一个 laaaaarge DIV 非常糟糕。

那么问题是：如何在不使用固定宽度的情况下让 DIV WIDTH 适应文本行长度？

这些是我的测试

  1. 当前结果与自动和两个文本行长文本

当前结果与自动和两个文本行长文本

  1. 固定宽度和短文本的结果更差

在此处输入图像描述

  1. 第一个想要的结果

想要的结果

  1. 第二个想要的结果

在此处输入图像描述

标签： cssflexbox

解决方案

检查classes= parent, myDiv。这是使用table和flexbox layout

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  height: 35px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  text-align: left;
  background-color: #04AA6D;
  color: white;
}


/* Check the styles below*/
.parent {
  display: flex;
  align-items: center;
}

.myDiv {
  background-color: red;
  height: 100%;
  width: fit-content;
  padding: 0 10px;
  margin-left: auto;
  display: flex;
  align-items: center;
}
<table id="customers">
    <thead>
        <tr>
          <th class="parent">
          Company
            <div class="myDiv">Hello World</div>
          </th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
    </tbody>
</table>

如果widthofmyDiv大于，您可以隐藏大文本并显示点300px：

.myDiv {
  text-overflow: ellipsis;
  overflow: hidden; 
  max-width: 300px; 
  white-space: nowrap;
}

编辑：您的代码的解决方案

查看：

#provDiv{
    position: absolute; 
    top: 0; 
    right: 0; 
    width: fit-content;
    padding: 0 5px;
    background: greenyellow;  
    text-align: right;
    /*ADDED*/
    text-overflow: ellipsis;
    overflow: hidden; 
    max-width: 300px; 
    white-space: nowrap;
}


<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" href="/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <style>
      #provDiv{
        position: absolute; 
        top: 0; 
        right: 0; 
        width: fit-content;
        padding: 0 5px;
        background: greenyellow;  
        text-align: right;
        text-overflow: ellipsis;
        overflow: hidden; 
        max-width: 300px; 
        white-space: nowrap;
      }
    </style>

    <title>Title</title>
  </head>

  <body>

    <div class="container-fluid">
    
      <div class="d-flex flex-wrap">
        <div class="col-xl-6 col-sm-12">
          <div class="d-flex justify-content-start">
              <h1 class="p-1">Calls</h1>
              <p id="provincie"></p>
          </div>
        </div>
        <div class="col-xl-6 col-sm-12">
          <div class="d-flex flex-wrap justify-content-end">
              <div>
                <button class="btn btn-primary m-3" id="AggiungiRiga" type="submit" value="Submit" >+ Riga</button>
              </div>
              <div>
                <button class="btn btn-danger m-3" id="EliminaRiga" type="submit" value="Submit" >- Riga</button>
              </div>
              <div>
                <button class="btn btn-success m-3" id="SalvaRiga" type="submit" value="Submit" >Salva</button>
              </div>
          </div>
        </div>
      </div>

      <div class="table-responsive">
        <table style="min-width:1000px;" class="table table-striped table-hover table-bordered text-center" id="tabella">
          <thead>
            <tr>
              <th data-dbrow="riga" scope="col" style="width: 5%">#</th>
              <th data-dbrow="id" scope="col" style="width: 5%">ID</th>
              <th data-dbrow="nome" scope="col" style="width: 30%">Nome</th>
              <th data-dbrow="tel" scope="col" style="width: 11%">Telefono</th>
              <th data-dbrow="mail" scope="col" style="width: 29%">Email</th>
              <th data-dbrow="device" scope="col" style="position:relative; width: 10%">
                  <select id="select1" class="form-select form-select-sm">
                      <option value="$" selected disabled>- Text 1 -</option>
                      <option value="val1">Text 2</option>
                      <option value="val2">Text 3</option>
                      <option value="val2">Text 4</option>
                  </select>
                  <div id="provDiv">Line 1 - medium length<br>Line 2 - John</div>
              </th>
              <th data-dbrow="iscli" scope="col" style="width: 5%">&Egrave; Cli</th>
              <th data-dbrow="prov" scope="col" class="cellaProv" style="width: 5%">Prov</th>

            </tr>
          </thead>
          <tbody id="table1bd">

              <tr>
                <th>some text</th>
                <td>some text</td>
                <td contenteditable="true">some text</td>
                <td contenteditable="true">some text</td>
                <td contenteditable="true">some text</td>
                <td>some text</td>
                <td contenteditable="true">some text</td>            
                <td contenteditable="true">some text</td>            
              </tr>
              <tr>
                <th>some text</th>
                <td>some text</td>
                <td contenteditable="true">some text</td>
                <td contenteditable="true">some text</td>
                <td contenteditable="true">some text</td>
                <td>some text</td>
                <td contenteditable="true">some text</td>            
                <td contenteditable="true">some text</td>            
              </tr>
              <tr>
                <th>some text</th>
                <td>some text</td>
                <td contenteditable="true">some text</td>
                <td contenteditable="true">some text</td>
                <td contenteditable="true">some text</td>
                <td>some text</td>
                <td contenteditable="true">some text</td>            
                <td contenteditable="true">some text</td>            
              </tr>                            

          </tbody>
        </table>
      </div>  

    </div>

    

    <pre></pre>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>


  </body>
</html>

推荐阅读