条件 div 向右浮动(如果文本后有足够的空间)仅使用 CSS

我有一个div，里面有很多文字，并在文本后面链接"阅读更多"。我希望"阅读更多"浮动在文本之后的右侧。但前提是有足够的空间。如果没有，我希望"阅读更多"只显示在下一行的文本之后。我试图使用 flex 完成此操作，但不幸的是，它无处可去，因为文本被识别为整个块。

我已经准备了代码沙箱，您可以在其中直观地看到我的问题。

沙盒

.read-more {
  display: inline-flex;
  color: blueviolet;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  float: right; // I would like to have this line conditional somehow. Probably using float is not a way to go at all
}

是否可以仅使用CSS获得类似的东西？

您可以在 DOM 节点 (https://www.w3schools.com/js/js_htmldom_nodes.asp( 中创建元素并添加逻辑以使用 screen.width 检查屏幕大小，然后根据它是否合适来创建它。

float: right评论道。这是你想要的吗？？

body {
  font-family: sans-serif;
}
.entry {
  margin: 10px;
  border: solid palevioletred 3px;
  width: 400px;
}
.read-more {
  display: inline-flex;
  color: blueviolet;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  /* float: right; */
}
.no-float {
  float: initial;
}

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="app">
    <div class="entry">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione dolorem eos et totam doloribus ipsa illo porro unde, asperiores consequatur tempore dolor, veritatis quod corporis enim nesciunt. Impedit error atque veniam tempore ea facilis natus voluptatibus.
      Illo vitae consequatur explicabo...
      <div class="read-more">
        Read more
      </div>
    </div>
    CURRENT ERRUR
    <div class="entry">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione dolorem eos et totam doloribus ipsa illo porro unde, asperiores consequatur tempore dolor, veritatis quod corporis enim nesciunt. Corrupti est fuga nisi commodi, repudiandae harum tempore
      officia enim repellat deserunt. Nemo id animi libero molestiae vitae mollitia sequi Impedit error atque veniam tempore ea facilis qui voluptates natus voluptatibus. Illo vitae consequatur explicabo.cxzczxczx dsadsxxa..
      <div class="read-more">
        Read more
      </div>
    </div>
    This is how I want it to look like.
    <div class="entry">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione dolorem eos et totam doloribus ipsa illo porro unde, asperiores consequatur tempore dolor, veritatis quod corporis enim nesciunt. Corrupti est fuga nisi commodi, repudiandae harum tempore
      officia enim repellat deserunt. Nemo id animi libero molestiae vitae mollitia sequi Impedit error atque veniam tempore ea facilis qui voluptates natus voluptatibus. Illo vitae consequatur explicabo.cxzczxczx dsadsxxa..
      <div class="read-more no-float">
        Read more
      </div>
    </div>
  </div>
  <script src="src/index.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：