Question

有没有办法让文字首先在其高度伸展它的容器，如果它到达max-height，它会在水平方向上展开并扩展宽度？

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.block {
  border: 1px solid grey;
  border-radius: 4px;
  padding: 10px;
  margin: 12px;
  max-height: 200px;
  min-width: 200px;
  display: inline-block;
  max-width: 40%;
}

＆＃13;

<div id="container">
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque alias optio, fugiat porro quo molestiae illo laborum ipsam consequuntur? Repudiandae facere pariatur veniam repellat, aliquid dolorum repellendus eum laborum natus.</div>
</div>

＆＃13;

所以每个.block首先获取最大高度，然后在需要时展开其宽度。

我希望我能够理解所需的行为。

css让文本首先扩展高度然后扩展宽度

0 个答案: