Question

父容器是固定宽度的。最左边的div总是存在可变长度的文本，该文本应该是单行的。在左div之后没有一个，一个或两个具有固定宽度的div，并且应该随着文本长度的增加向右移动，直到填满整个父级。进一步增加文本长度 - 溢出的文本不应该是可见的。谢谢。

<td style="width: 300px;">
    <div style="overflow: hidden;float:left;">
       <span>some variable text</span>
    </div>
    <div style="width:50px;float:left;">fixed1</div>                                                                                                                                                                    
    <div style="width:50px;float:left;">fixed2</div>
</td>

Answer 1

根据评论进行编辑。

jQuery解决方案。

＆＃13;

$(document).ready(function() {
  $('#myTable td').each(function() {
    var $fixed1 = $(this).children().hasClass('fixed1');
    var $fixed2 = $(this).children().hasClass('fixed2');
    if ($fixed1 && $fixed2) {
      $(this).children('.vText').css('width', '196px');
    }
    if (($fixed1 && !$fixed2) || (!$fixed1 && $fixed2)) {
      $(this).children('.vText').css('width', '248px');
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td style="width:300px;border:1px solid green;">
      <div style="white-space:nowrap;text-overflow:clip;overflow:hidden;float:left;border:1px solid red;width: 300px;" class="vText">
        <span>some variable text no overflowing</span>
      </div>
      <div style="width:50px;float:left;border:1px solid red;" class="fixed1">fixed1</div>
      <div style="width:50px;float:left;border:1px solid red;" class="fixed2">fixed2</div>
    </td>
  </tr>
  <tr>
    <td style="width:300px;border:1px solid green;">
      <div style="white-space:nowrap;text-overflow:clip;overflow:hidden;float:left;border:1px solid red;width: 300px;" class="vText">
        <span>some variable text</span>
      </div>
      <div style="width:50px;float:left;border:1px solid red;" class="fixed1">fixed1</div>
  </tr>
  <tr>
    <td style="width:300px;border:1px solid green;">
      <div style="white-space:nowrap;text-overflow:clip;overflow:hidden;float:left;border:1px solid red;width: 300px;">
        <span>some variable text</span>
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

Flexbox可以做到这一点。

＆＃13;

.container {
  width: 300px;
  margin: 1em auto;
  border: 1px solid green;
  white-space: nowrap;
  display: flex;
}

.text {
  overflow: hidden;
}

.fixed {
  background: pink;
  border: 1px solid blue;
  flex: 0 0 50px;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat sit perspiciatis deleniti provident veniam molestias voluptatum itaque odit enim commodi?</div>
  <div class="fixed">50px</div>
  <div class="fixed">50px</div>
</div>

<div class="container">
  <div class="text">Lorem, ipsum dolor </div>
  <div class="fixed">50px</div>
  <div class="fixed">50px</div>
</div>

＆＃13;

最多三个div内联，左侧总是呈现文本变量宽度不溢出，右边两个固定宽度

2 个答案: