blocks|key|3394588|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3394589|div+{
++border:+1px+solid+#F00;
++display:+flex;
++overflow:+hidden;
++resize:+horizontal;
++white-space:+nowrap;
}

div+>+*+{
++min-width:+60px;
++overflow:+hidden;
++text-overflow:+ellipsis;
}

span+{
++flex-shrink:+1;
}

button+{
++flex-shrink:+50000000;
}|code-block|syntax|javascript|3394590|<div>
++<button>Button</button>
++<button>Long+Button</button>
++<span>Post-Btn+Text</span>
</div>|3394591|3394592|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  border: 1px solid #F00;
  display: flex;
  overflow: hidden;
  resize: horizontal;
  white-space: nowrap;
}

div &gt; * {
  min-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

span {
  flex-shrink: 1;
}

button {
  flex-shrink: 50000000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;button&gt;Button&lt;/button&gt;
  &lt;button&gt;Long Button&lt;/button&gt;
  &lt;span&gt;Post-Btn Text&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4631459|text|试着调整窗口的大小。希望能帮上忙。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4631460|​|4631461|.container+{
++display:+flex;
++border:+2px+red+solid;
}

.container+button,
.container+span+{
++font-size:+1rem;
++min-width:+30px;
++margin-right:+1rem;
++overflow:+hidden;
++text-overflow:+ellipsis;
++white-space:+nowrap;
++position:+relative;
}|code-block|syntax|javascript|4631462|<div+class="container">
++<button>Button</button>
++<button>Long+Button</button>
++<button>Longer+Batton</button>
++<span>Some+Text</span>
</div>|4631463|4631464|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try to resize the window. I hope it helps.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  display: flex;
  border: 2px red solid;
}

.container button,
.container span {
  font-size: 1rem;
  min-width: 30px;
  margin-right: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;button&gt;Button&lt;/button&gt;
  &lt;button&gt;Long Button&lt;/button&gt;
  &lt;button&gt;Longer Batton&lt;/button&gt;
  &lt;span&gt;Some Text&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|872223|text|其想法是在span上将flex-shrink;设置为0。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|872224|​|872225|div+{
++display:+flex;
++resize:+both;
++overflow:+hidden;
++padding:10px;
++border:1px+solid;
}

button+{
++text-overflow:+ellipsis;
++white-space:+nowrap;
++overflow:+hidden;
++min-width:+30px;
}

span+{
++min-width:+50px;
++flex-shrink:+0;
++white-space:+nowrap;
++overflow:+hidden;
++text-overflow:+ellipsis;
}|code-block|syntax|javascript|872226|Bottom+right+corner+to+resize.
<div>
++<button>Button</button>
++<button>Long+Button</button>
++<button>Even+longer+Button</button>
++<span>Post-Btn+Text</span>
</div>|872227|872228|872229|因为跨度最终也必须缩小，所以它至少还需要flex-shrink:1;。|872230|这方面的问题是，按钮上的收缩值必须足够高，这样键的跨度就不会随着按钮而缩小，而且不能太高，否则按钮就不会缩小。|872231|872232|div+{
++display:+flex;
++resize:+both;
++overflow:+hidden;
++padding:10px;
++border:1px+solid;
}

button+{
++text-overflow:+ellipsis;
++white-space:+nowrap;
++overflow:+hidden;
++min-width:+30px;
++
++flex-shrink:999999999999;
}

span+{
++min-width:+50px;
++flex-shrink:+0;
++white-space:+nowrap;
++overflow:+hidden;
++text-overflow:+ellipsis;
++
++flex-shrink:1;
}|872233|Bottom+right+corner+to+resize.
<div>
++<button>Button</button>
++<button>Long+Button</button>
++<button>Even+longer+Button</button>
++<span>Post-Btn+Text</span>
</div>|872234|872235|我可能会回到这里看看是否有更好的方法。|872236|entityMap^0|B|C|Q|1|0|0|0|0|0|0|K|E|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1H|8|@]|D|@]|E|$]]|$1|U|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|V|3|W|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|X|3|Y|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|Z|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|1M|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|13|$]]

<p>The idea is to set <code>flex-shrink;</code> to <code>0</code> on the span.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  display: flex;
  resize: both;
  overflow: hidden;
  padding:10px;
  border:1px solid;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 30px;
}

span {
  min-width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Bottom right corner to resize.
&lt;div&gt;
  &lt;button&gt;Button&lt;/button&gt;
  &lt;button&gt;Long Button&lt;/button&gt;
  &lt;button&gt;Even longer Button&lt;/button&gt;
  &lt;span&gt;Post-Btn Text&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>Because the span must also shrink eventually it also needs at least <code>flex-shrink:1;</code>.</p>

<p>The issue with this is that the shrink value on the buttons must be really high enough so that the span doesn't shrink with the buttons and it can't be too high otherwise the buttons won't shrink.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  display: flex;
  resize: both;
  overflow: hidden;
  padding:10px;
  border:1px solid;
}

button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 30px;
  
  flex-shrink:999999999999;
}

span {
  min-width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  flex-shrink:1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Bottom right corner to resize.
&lt;div&gt;
  &lt;button&gt;Button&lt;/button&gt;
  &lt;button&gt;Long Button&lt;/button&gt;
  &lt;button&gt;Even longer Button&lt;/button&gt;
  &lt;span&gt;Post-Btn Text&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I might come back to this see if there's a better way.</p>


<p>I am attempting to create a breadcrumb (buttons followed by a single span) for the user to navigate a directory structure.  I would like to provide this in a horizontal layout with the following properties:</p>

<ol>
<li>If there is enough space for all buttons/text, then show all buttons with the minimum width required to do so (e.g., the buttons are as slim as possible).</li>
<li>Once there is no longer space for all buttons/text, then begin collapsing only the buttons.  Preferably, this collapse would happen proportionally to each button's size.</li>
<li>Once all buttons have been collapsed to some min-width, then start collapsing the final span.</li>
</ol>

<p>I have full control of both the DOM and CSS.  Here are screenshots of what I am looking to see in each case (ignore the vertical alignment and changing button margin issues):</p>

<p><a href="https://i.stack.imgur.com/DgZFV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DgZFV.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/fdxcI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fdxcI.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/Fizz7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fizz7.png" alt="enter image description here"></a></p>

<p>Does anyone know how to accomplish the above layout in HTML 5?  Note that I only need to support modern browsers (IE/Edge support is <strong>not</strong> required).</p>


CSS Breadcrumb Layout

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我试图为用户创建一个面包屑(按钮后面跟着一个span)来导航目录结构。我想在横向布局中提供以下属性：如果所有按钮/文本都有足够的空间，则显示所有具有所需最小宽度的按钮(例如，按钮与possible).Once一样细-不再有所有按钮/文本的空间，然后开始只折叠按钮。最好是按每个按钮的大小成比例地发生这种折叠。在所有按钮被...

问CSS面包屑布局
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS面包屑布局EN