CSS:截断按钮文本并将图标保留在弹性框中

我试图使一个按钮显示一些被截断的文本和一个图标。我希望即使文本开始截断时也要显示图标。

因此,问题在于当文本被截断时,图标也会被删除。 我可以通过将图标作为单独的按钮来解决此问题-但这会使键盘导航变得怪异。

请参阅下面的示例:

.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>

我试图将text-overflow:省略号移到item2_text,但它不起作用。 谁能帮我 ?

评论
  • Honey
    Honey 回复

    You can give a fixed width and display property to .item2_text :

    .bar {
      display: flex;
    }
    
    .item2 {
      border: none;
      background-color: white;
    }
    
    .item2_text {
      display: inline-block;
      width: 150px;
      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>
  • 水立方
    水立方 回复

    如果要使用动态方法,请不要为文本设置固定宽度,请使用calc属性。将省略号代码移动到跨度,而不是将其放在按钮本身上。

    .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>