CSS：截断按钮文本并将图标保留在弹性框中
[英]CSS: Truncate button-text and keep icon in a flex-box
问题描述
I am trying to make a button display some text that is truncated and a icon.
我想让一个按钮显示一些被截断的文本和一个图标。 I want the icon to be present even when the text starts to truncate.即使文本开始截断，我也希望图标出现。
So the problem is that when the text is truncated - the icon is also removed.所以问题是当文本被截断时 - 图标也被删除。 I could solve this by having the icon as a separate button - but that would make the keyboard navigation weird.我可以通过将图标作为一个单独的按钮来解决这个问题——但这会使键盘导航变得奇怪。
See my example below:请参阅下面的示例：
.bar { display: flex; }.item2 { border: none; background-color: white; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
<nav class="bar"> <span class="item1"> TEST </span> <button type="button" class="item2"> <span class="item2_text">This is a veeeery long text that we want to overflow so that everything is on one line and does not break our content line in two or overflow</span> <span class="item2_icon"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve"> <g> <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z" /> </g> </svg> </span> </button> <span class="menu"> Stuff </span> </nav>
I have tried to move the text-overflow: ellipsis to the item2_text but it does not work.我试图将 text-overflow: ellipsis 移动到 item2_text 但它不起作用。 Can anyone help me?谁能帮我？
1 个解决方案
解决方案1
3 已采纳 2020-05-18 09:45:32
If you want to have a dynamic approach don't give the text a fixed width, play with the calc property.如果你想要一个动态的方法，不要给文本一个固定的宽度，使用 calc 属性。 First, move the ellipsis code to the span instead of having it on the button itself and add inline-block property in order to have the ellipsis one to work.首先，将省略号代码移动到 span 而不是将其放在按钮本身上，并添加inline-block属性以使省略号起作用。 Then set the item with to be 100% and subtract the width of the icon (along with some extra pixels).然后将项目设置为 100% 并减去图标的宽度（以及一些额外的像素）。
.bar { display: flex; }.item2 { border: none; background-color: white; overflow: hidden; }.item2_text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; width: calc(100% - 25px); }
<nav class="bar"> <span class="item1"> TEST </span> <button type="button" class="item2"> <span class="item2_text">This is a veeeery long text that we want to overflow so that everything is on one line and does not break our content line in two or overflow</span> <span class="item2_icon"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve"> <g> <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z" /> </g> </svg> </span> </button> <span class="menu"> Stuff </span> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.