Question

我花了20分钟才找到这个，所以我在回答我的问题。

所以，说我有一个div：

<div id="foo"> Lorem ipsum dolor sit amet consecuter Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

而且我不确定div中有多少东西。它可以是一个句子或整篇科学文章。

所以，如果div中没有多少，我希望它能够达到它需要的范围。但是，如果div中有很多东西，我希望它是，width: 75%。

即，如果它符合浏览器窗口的75％，则它是一行。如果它不合适，则线条会以75％的速度包裹。

我该怎么做？

Answer 1

轻松自负。

#foo {
    width: max-content;
    max-width: 75%;
}

因此，如果内容符合您的浏览窗口的75％，那么它将在一行上。如果它不合适，它将换行75％。

如果您的浏览器尚未支持max-width，它将固定为75％，这很好。

一个过于复杂的jsfiddle示例doohickey：

＆＃13;

var data;
var delay = 150;

async function thingy() {
  $("#controls").hide();
  $("#magic").text("");
  var i;
  for (i = 0; i < data.length; i++) {
    $("#magic").append(data[i] + " ");
    await sleep(delay);
  }
  $("#controls").delay(1000).fadeIn();
}

function updatedelay() {
  $("#delay").text(delay + "ms");
}

$(function() {
  data = $("#data").text().split(" ");
  thingy();
});


// grrrr
// Credit: http://stackoverflow.com/a/39914235/2729876
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

＆＃13;

#magic {
  border: solid 1px black;
  padding: 10px;
  margin: auto;
  width: max-content;
  max-width: 75%;
}

#controls {
  display: none;
  border: solid 1px blue;
  width: 50%
}

#data {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <div id="magic"> </div>

  <br><br><br>

  <div id="controls">
    <button onclick="thingy();">Again!</button>
    <br><br>
    Delay:<span id="delay">150ms</span><br>
    <button onclick="$('#delay').text((delay+=100)+'ms')">++</button>
    <button onclick="$('#delay').text((delay+=10)+'ms')">+</button> | 
    <button onclick="$('#delay').text((delay-=10)+'ms')">-</button>
    <button onclick="$('#delay').text((delay-=100)+'ms')">--</button>
  </div>
</center>


<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

＆＃13;

最大宽度上限为75％

1 个答案: