Question

我有以下HTML：

<div id="container"><div id="textOnLeft">{{someDynamicText}}</div><div id="btnOnRight"><button></button></div></div>

按钮应始终位于动态文本的右侧。如果文本的宽度+按钮的宽度超过容器的宽度 - 文本应该是省略号。

请指导。

谢谢， AMPO。

Answer 1

除非您在textOnLeft上设置了一定的宽度限制，否则您不会获得省略号。其余的是flexbox的魔力。

＆＃13;

#container{
  display: flex;
  flex-direction: row;
}

＆＃13;

<div id="container">
  <div id="textOnLeft">{{someDynamicText}}</div>
  <div id="btnOnRight">
    <button></button>
  </div>
</div>

＆＃13;

Answer 2

我有解决方案。这是你的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first Backbone app</title>
    <style>
        #container { display: flex; }
    </style>
</head>
<body>
    <div id="container">
       <div id="textOnLeft">{{someDynamicText}}</div>
       <button>button</button>
    </div>
    <script>
       window.addEventListener("resize", function () {
          var text = "{{someDynamicText}}";
          var textField = document.getElementById("textOnLeft");
          if (window.innerWidth < 500) {
             textField.innerHTML = "...";
          }
          else {
             textField.innerHTML = text;
          }
    });
    </script>
</body>
</html>

我只选择500px这个例子，你可以选择你想要的任何东西。

内部div在一行。内左是动态的

2 个答案: