Question

我有这个页面，在表格中显示了很多信息。该表的一部分使用css在弹出div中显示其他信息。只要信息很少，这种方法就可以正常工作。当表格中有大量文字时，它会扩展到屏幕边缘以外的方向，并且或多或少变得不可读。由于安全原因，我无法在表格中披露这些信息，但我已经上传了一个模糊的图像。

http://i.imgur.com/VKaQVYH.png

/* version 2 */

a.memberinfo {
  color: #000;
  text-decoration: none;
}
a.memberinfo b {
  display: none;
}
a.memberinfo:hover {
  border: 0;
  position: relative;
  z-index: 500;
  text-decoration: none;
  border-color: #000;
}
a.memberinfo:hover b {
  display: block;
  position: absolute;
  top: 20px;
  left: -25px;
  padding: 5px;
  font-weight: normal;
  color: #000;
  border: 1px solid #000;
  background: #ffffee;
}

<a class="memberinfo" href="#">Info
    	<b>
    		<em class="outer"></em>
    		<em class="inner"></em>
    								
    		<table>							
    			<thead>
    				<tr>
    					<th nowrap>
    						Name
    					</th>
    					<th nowrap>
    						Send
    					</th>
    					<th nowrap>
    						Receive
    					</th>
    					<th>
    						Interval
    					</th>
    					<th>
    						Timeout
    					</th>
    					<th>
    						Type
    					</th>
    				</tr>
    			</thead>
    			<tbody>
    															
    				<tr>
    					<td nowrap>
    						Name
    					</td>
    					<td nowrap>
    						Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata Senddata 
    					</td>
    					<td nowrap>
    						Receive data
    					</td>
    					<td nowrap>
    						1
    					</td>
    					<td nowrap>
    						1
    					</td>
    					<td nowrap>
    						TTYPE_HTTP
    					</td>
    				</tr>					
    			</tbody>
    		</table>
    	</b>
</a>

编辑，这是一个显示问题的小提琴： http://jsfiddle.net/xp2xfbw6

我希望div能够扩展到屏幕的边缘，但不能进一步扩展。如果它需要扩展更多，我希望它扩展到左边。出于可读性原因，我希望避免包装文本。

我真的希望这个解释足够清楚。否则，请让我知道什么是不清楚的，我会尽力回答。

提前致谢！

Answer 1

如果Scor3keeper的最小/最大建议答案符合您的需求，那可能是一个更好的答案。这是一个更精确（复杂）的方式，可能更准确地说是你正在寻找的。

但是，我之前遇到过类似的问题，我想让一个文本框垂直居中，与点击的垂直堆叠列表元素内联。但是，如果文本框中的文本很长，并且框在展开或在所需区域下方，则应将其移动到框的顶部/底部与最后一个列表元素的底部对齐的位置

我在javascript / jquery中解决了这个问题：

$('div.myclass').click(function() {
        $('div.myclass').removeClass('selected');
        var $this = $(this);
        var $box = $("#contentdescription > div.arrow_box");
        $this.addClass('selected');
        var relativeTop = $($this).closest('#listcontainer').position().top;
        var offsetTop = $($this).position().top;
        var height = $this.height();
        var centerY = offsetTop + height / 2;       
        var html = $($this).data('content');   
        if(html.length > 0){
            $($box)
            .text(html)
            .show();
        } else {
            $($box)
            .text("No description found for this element")
            .show();
        }

        var topLimit = $('div.list-element:nth-of-type(1)').offset().top - relativeTop;
        var bottomLimit = $('div.list-element:last-of-type').offset().top + $('div.list-element:last-of-type').height() - relativeTop;
        var boxTop = centerY - ($box.height() / 2);

        //if the calculated top Point of the box, is not above the set limit, place the box there.
        if(boxTop > topLimit){
            $($box).css({
                top: boxTop 
            });
        } else {
            //otherwise, place it at the top limit
            $($box).css({
                top: topLimit 
            });
        }

        var boxBottom = $box.offset().top + $box.height() - relativeTop;

        //The box may still be sticking out underneath the bottom limit of the frame. If it does, adjust it to fit inside.
        if(boxBottom > bottomLimit){
            var newTop = bottomLimit -$box.height()
            $($box).css({
                top: newTop
            });
        }            

    });

我确信这可以改进为横向工作。请记住，这不会解决div比浏览器窗口的实际宽度更宽的问题。

Answer 2

将min / max-width设置为表的div容器并添加overflow-x：auto; 当表格越界时，这将导致滚动条出现。

您也可以将表格格式化为向下而不是跨越。

不要在屏幕边缘展开div

2 个答案: