让文本内容自适应页面大小并截取显示,并且让按钮紧挨着文本内容

首先要定义一个样式:

     .confrimStr {

            display: inline-block;*display: inline;*zoom: 1;

            overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;

        }

然后需要自适应页面宽度并截取显示...那么就指定class为上面定义的

 

    

      <asp:Label ID="ltReceiver" runat="server" class="confrimStr"></asp:Label>

     <asp:Label ID="ltReceiverCC" runat="server" class="confrimStr"></asp:Label>

 

     <asp:Label ID="ltReceiverBCC" runat="server" class="confrimStr"></asp:Label>

增加一个隐藏的控件,用于存放接收人文本内容,到时候用于获取这个控件的文本内容宽度

       <asp:Label ID="hidReceiver" runat="server" style="visibility: hidden;"></asp:Label>
其中一定要用visibility:hidden,用display:none和visible:false都不行

另外一个比较重要的就是写js判断当前页面窗口大小并减去一些宽度然后赋值给控件的width属性即可(主要包括页面加载完和页面窗体大小改变事件中)

 

  $(window).resize(function () {

            var offsetWid = document.documentElement.clientWidth - 265;

             if ($("#<%=hidReceiver.ClientID%>")[0].offsetWidth < offsetWid) {
                $("#<%=ltReceiver.ClientID%>").css("width", receiver.offsetWidth + "px");
            }
            else {
                $("#<%=ltReceiver.ClientID%>").css("width", offsetWid + "px");
            }

            $("#<%=ltReceiverCC.ClientID%>").css("width", offsetWid + "px");

            $("#<%=ltReceiverBCC.ClientID%>").css("width", offsetWid + "px");        })

   

        // 收缩展开效果

        $(document).ready(function () {

            var offsetWid = document.documentElement.clientWidth - 265;

            if ($("#<%=hidReceiver.ClientID%>")[0].offsetWidth < offsetWid) {
                $("#<%=ltReceiver.ClientID%>").css("width", receiver.offsetWidth + "px");
            }
            else {
                $("#<%=ltReceiver.ClientID%>").css("width", offsetWid + "px");
            }

            $("#<%=ltReceiverCC.ClientID%>").css("width", offsetWid + "px");

            $("#<%=ltReceiverBCC.ClientID%>").css("width", offsetWid + "px");        });

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页