javascript - 推到一边时出现文字换行问题

Question

所以，我有点进退两难。

我希望文本最初在加载时换行，但是当元素(在两侧)宽度设置为一个值 (200px) 时，我希望它完全移动到一侧。

问题是，当元素(菜单)出现时，它只是将文本缩小到被推到一边的元素中。实际上 div 移动到一边，但文本环绕将其向下推。

看，这里包好了，原来应该是这个样子

然后，当菜单打开时，它会这样做

我试过使用 white-space:nowrap; 但这只会完全删除自动换行。

我已经用谷歌搜索过这个问题，但由于我的问题往往是我不能很好地使用关键字，或者找不到解决这个问题的好方法。

最终结果应该是开头的文字换行，然后包含文字的元素应该被推到视线之外的一边。

CSS:

/** Menu CSS **/
#menu-bar-container {
    float:left;
    background-color:#2c2c2c;
    height:100%;
}

 /** "News" element supposed to be pushed to the side **/
.app-content {
    overflow: hidden;
    position: relative;
}

.app-section {
    position: relative;
    width:100%;
}

HTML:

 <div id="server-news-container" class="app-content app-scrollable" style="height: 453px; overflow: scroll;">
      <div class="app-section">
           <i id="news-icon" class="fa fa-exclamation-triangle fa-lg"></i> 
           <span id="news-text">In-development, so the app may stop working at any point in time. You have been warned.</span>
           <div id="news-date">Sunday, June 15 2014</div>
      </div>
      <div class="app-section">
           <i id="news-icon" class="fa fa-info-circle fa-lg"></i>
           <span id="news-text">Test of the info thing</span> <div id="news-date">Saturday, June 14 2014</div>
      </div>
 </div>

如有任何帮助或指点，我们将不胜感激。

Answer 1

正如Chong Yu 所指出的，这是一个位置问题。 您需要在菜单出现时更改 content { left:width-of-menu }，并在菜单折叠时将其返回到 content { left:0 }。

如果您没有明确设置菜单的宽度，则需要在代码中的某个位置获取它。为了便于解释，我们假设您将其设置为 100 像素宽。

.parent.content, .parent.menu { position:relative }
.content { left:0; position:absolute }
.menu { display:none; width:100px }

Menu button is clicked and made visible:
.content { left:100px }
.menu { display:block }