如何从左侧向右增加div容器宽度

Question

我有一个容器，可以在页面的最右上方放置一些按钮。

我已将其位置设置为固定，并为其指定所需的特定宽度和高度。

问题是当按钮上的文字增加时，它会离开页面。我可以设置溢出到隐藏，这将阻止它从我的按钮移开，但然后文本将被切断。

我提出的问题是，当文本增长时，如何将div移动到页面左侧，但左侧容器的位置必须保持不变？

CSS

#Container {
    z-index: 9000;
    height: 300px;
    width: 260px;       // im guessing this 3 height,width,and position is the problem but they can not be changed.They are needed.so is there a way i can do this maybe in jquery? 
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #1a1a1a;
    display: inline-block;
    float: right;
   direction:rtl  // i tried adding this but my container doesnt move the text cuts off to the left.
}

尝试

function TextGrow() {
            var right = $('#Container').offset().right;
            $("#Container").css({ right: right }).animate({ "right": "0px" }, "slow");
        }// didnt do anything

Answer 1

尝试添加这些css命令：

min-height: 100px;
max-height: 100px;
width: auto;
float: right;

确保父容器不会出现在屏幕之外。

Answer 2

你在找这样的东西吗？

如果您的容器必须具有miminum设置宽度，但必须在其内容超过最小宽度时增长，请使用min-width。

下面的示例通过单击正文将内容添加到右上角容器中。它的初始大小大于其内容，但随着内容的增长，容器也会增长。

＆＃13;

＆＃13;

var text = "Click body "
$("body").click(function(){
  text += "Click ";
	$("div").html(text);
})

＆＃13;

div{
  position: fixed;
  top: 0px;
  right: 0px;
  background-color: black ;
  color:red;
  padding: 20px;
  min-width: 150px;
  text-align: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click body</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eius molestias accusantium quo consectetur laudantium consequatur, iusto suscipit soluta expedita reiciendis numquam fugiat cum laborum, culpa voluptatem ipsam pariatur minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas dicta inventore fugit modi voluptatum dolorem dolor at tempore? Voluptatum cupiditate consequuntur, est corrupti. Non dolore sunt facere mollitia excepturi, obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolor consequuntur officia. Numquam mollitia neque qui consequatur aliquid culpa consectetur sint, rerum facilis alias, quo voluptatem omnis incidunt ratione odit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur asperiores ex aperiam, eos modi assumenda, accusantium architecto sit. Sequi id ipsam, a earum quibusdam esse harum, atque provident repellendus accusantium!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur asperiores ex aperiam, eos modi assumenda, accusantium architecto sit. Sequi id ipsam, a earum quibusdam esse harum, atque provident repellendus accusantium!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur asperiores ex aperiam, eos modi assumenda, accusantium architecto sit. Sequi id ipsam, a earum quibusdam esse harum, atque provident repellendus accusantium!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur asperiores ex aperiam, eos modi assumenda, accusantium architecto sit. Sequi id ipsam, a earum quibusdam esse harum, atque provident repellendus accusantium!</p>

＆＃13;

＆＃13;

＆＃13;