Ẩn SPAN tràn

Question

Tôi đang cố gắng tạo tiện ích kiểu hộp tổ hợp (tương thích jquery-ui) và hiện tại tôi đang cố gắng lấy bố cục tĩnh của hộp được sắp xếp. Vấn đề là khi tôi có văn bản dài trong khu vực giá trị của lựa chọn nó không clip trong Firefox (nó thực sự kết thúc tốt đẹp). Tôi không muốn điều này và cố gắng kết hợp khác nhau tràn: hidden trắng-không gian: nowrap vv nhưng trong Firefox nó vẫn kết thúc tốt đẹp. Mã mẫu dưới đây.

<a href="#" class="ui-widget ui-widget-content ui-custom-button ui-state-default ui-corner-all ui-helper-reset" style="padding-left:5px;text-decoration: none; width: 139px; "> 
    <span style="float:right;margin-top:1px;border-left:1px solid #D3D3D3;" class="ui-custom-button-icon ui-icon ui-icon-triangle-1-s" ></span> 
    <span style="line-height:1.5em;font-size:10px;margin-top:1px;overflow:hidden;height:16px;">If the text is very long then somethin</span> 
</a> 

Có ai có thể cung cấp trợ giúp về vấn đề này không?

Answer 1

Hãy thử cung cấp cho phần tử display:block hoặc thay đổi SPAN thành phần tử cấp khối như DIV.

Answer 2

Sự cố là các phần tử nội tuyến và bạn không thể đặt chiều rộng hoặc chiều cao trên các phần tử nội tuyến.

Và khi điều khiển tràn dựa trên thứ nguyên khối Nó sẽ không hoạt động.

Tuy nhiên, như của Firefox 3.0, có hỗ trợ cho

display: inline-block 

nào cho phép bạn kiểm soát các yếu tố như thể nó là một khối, nhưng với phạm vi chứa nó vẫn hoạt động như một phần tử nội tuyến .

Answer 3

Kiểm tra tràn-wrap tài sản css:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap