Question

特别是在低屏幕分辨率下，屏幕可以有一个水平滚动条。我想将div长度扩展到滚动条的末尾。因此，div的宽度可能大于100％。

#content{border:2px solid red}

<body>
  <div id="content">Test</div>
  <div id="wrap">
       NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText
  </div>
</body>

我想将content宽度扩展为屏幕宽度。

我该怎么做？

由于

Answer 1

#content{border:2px solid red}
body {
display:table;
}

<body>
  <div id="content">Test</div>
  <div id="wrap">
NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText
  </div>
</body>

Answer 2

检查出答案：你想要这个吗？

https://jsfiddle.net/sesn/mh9juu1w/

我添加了计算文字宽度的功能这里

$(function(){
$.fn.textWidth = function () {
     $body = $('body');
     $this =  $(this);
     $text = $this.text();
     if($text=='') $text = $this.val();
       var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width;inherit;margin:0;font-family:'  + $this.css('font-family') + ';font-size:'  + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
     $body.append(calc); 
     var width = $('body').find('span:last').width(); 
      $body.find('span:last').parent().remove(); 
     return width; 
    };
wrapWidth = $('#wrap').textWidth();
$('#content').width(wrapWidth);
});

Answer 3

为#wrap div编写css并设置宽度100％;

例如

div#wrap {
    width: 100%;
    display: inline-block;
    word-break: break-all;
}

将DIV宽度扩展到屏幕宽度

3 个答案: