Question

我有一个按钮，它包含一个左侧的图标，一个中间的跨度，其中包含产品名称（名称可能非常大），另一个跨度位于右侧，显示一个数字消息通知。我可以用这个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>

Answer 1

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

HTML

yum

CSS

- name: "Install OS packages"
  command: "yum install -y -e0 -d2 {{item}}"
  with_items: 
    - dos2unix
    - vim

限制按钮内的跨度大小

1 个答案: