Bootstrap面板和矢量图像，隐藏不在面板内的所有内容

Question

我有一个矢量SVG图像，这比我的面板宽度大，我会通过CSS - 或更智能的东西 - 隐藏面板内未包含的所有内容。这是plunk

<div class="panel panel-default">
  <div class="panel-heading">
    Timeline 
  </div>
  <div ui-view="timeline" class="ng-scope">
    <div class="panel-body ng-scope">
      <div id="target1">
        <div class="chronoline-wrapper chronoline-draggable">
          <div class="chronoline-canvas" style="height: 180px; position: absolute; left: 0px; top: 50px;">
              <! -- SVG related tags -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

所以你想要一个overflow: hidden的画布？我调整了你的插件以处理画布的溢出和左/右元素的定位。 PLUNK