限制按钮内的跨度大小

Posted 2021-05-05

我有一个按钮，它包含一个左侧的图标，一个中间的跨度，其中包含产品名称（名称可能非常大），另一个跨度位于右侧，显示了许多消息通知。我可以用这个CSS编辑限制文本的大小：如果我将文本溢出设置为按钮内的跨度，它根本不起作用。

   text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
    overflow: hidden;

问题是这也使消息通知跨越右侧，显示“...”我需要限制中间的跨度，但也要查看右侧跨度的文本。有任何想法吗？这是按钮

<button type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" style="
    display: inline-block;>
                            <i class="icon-list-alt"></i>                               
                            <span>JULIERME ALFREDO MADKE</span>                               

                            <i class="fa fa-chevron-down"></i>
                        </button>

答案

我为你创建了代码笔，看看你是否正在寻找：code pen example。请询问您是否需要更多解释，谢谢。

html

<!-- Question Reference : https://stackoverflow.com/questions/48428590/limiting-the-size-of-spans-inside-a-button#48428590 -->

<button type="button">
  <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-group-512.png"/>
  <span class="Name">Ibrahim Aziz asd asd asd asd asd asd</span>
  <span class="Notification">14</span>
</button>

CSS

button
{
  margin: 20px;
  width: 200px;
  height: 32px;
  padding: 0px;
  background-color: #3c3c3c;
  border-style: solid;
  border-color: transparent;
  border-width: thin;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

button img
{
  margin-left: 12px;
  margin-right: 12px;
  width: 20px;
  height: 20px;
  align-self: center;
}

button span.Name
{
  margin-left: 5px;
  margin-right: 5px;
  width: 100px;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
  white-space: nowrap;
  flex-grow: 1;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

button span.Notification
{
  margin-left: 12px;
  margin-right: 12px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #dedede;
  background-color: #4d4d4d;
  border-style: solid;
  border-width: thin;
  border-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  line-height: 20px;
  align-self: center;
}