câu hỏi

tôi có một cái một trong số đó làGiá trị văn bản rất dài. Tôi muốn Thay đổi kích thước để nó không bao giờ rộng hơn cha mẹ của nó, ngay cả khi nó phải cắt bỏ phần văn bản hiển thị. chiều rộng tối đa: 100%Nó nên được thực hiện.

Trước khi thay đổi kích thước:



Những gì tôi muốn sau khi thay đổi kích thước:



nhưng nếu bạn tải ví dụ jsFiddle này và điều chỉnh độ rộng của bảng kết quả nhỏ hơn Có thể thấy chiều rộngViệc chọn bên trong không thể giảm chiều rộng của nó.

Những gì tôi thực sự thấy sau khi thay đổi kích thước:



Tuy nhiên,trang tương đương với một

thay vì một Chia tỷ lệ chính xác. Bạn có thể nhìn thấy vàkiểm tra những thay đổi của bạn dễ dàng hơnnếu bạn có Một và một

cạnh nhau trên một trang .Nếu bạn xóa bỏ xung quanh thẻ , thay đổi kích thước có hiệu quả. Các nhãn bằng cách nào đó khiến việc thay đổi kích thước theo chiều ngang bị hỏng.
Hành động như có một quy tắc CSS fieldset { chiều rộng tối thiểu: nội dung tối thiểu; } . ( nội dung tối thiểu Nói một cách đại khái, chiều rộng tối thiểu sẽ không khiến trẻ bị tràn. ) nếu tôi thay thế Và

với min-width: min-content , trông giống hệt nhau. Tuy nhiên,nội dung tối thiểu Không có quy tắc nào cả. Hiển thị trong Kiểu của tôi, trong biểu định kiểu mặc định của trình duyệt hoặc trong Trình kiểm tra CSS của Fireorms. Tôi đã cố gắng ghi đè Tất cả các kiểu hiển thị trong CSS Inspector của Firebug và biểu định kiểu mặc định của Firefox forms.css , nhưng điều đó không giúp ích gì. bảo hiểm đặc biệt chiều rộng tối thiểuVà chiều rộngKhông làm gì cả.

mã số

HTML cho bộ trường:

    

        
            
            Nhân sư thạch anh đen, hãy phán xét lời thề của tôi. Con cáo nâu nhanh nhẹn nhảy qua con chó lười biếng.
            Nhà thầu phụ
            Thung lũng
            Ventura
            Phần mới nhất
            Khách truy cập
            Không có
        
    

CSS của tôi sẽ hoạt động nhưng không:

trường tập hợp {
    /* ẩn các tính năng trực quan cụ thể của fieldset: */
    margin: 0;
    padding: 0;
    đường viền: không có;
}

lựa chọn {
    chiều rộng tối đa: 100%;
}

cài lại chiều rộngthuộc tính cho mặc địnhKhông có gì được thực hiện:

trường tập hợp {
    chiều rộng: tự động;
    chiều rộng tối thiểu: 0;
    chiều rộng tối đa: không có;
}

CSS bổ sung nơi tôi cố gắng và thất bại trong việc giải quyết vấn đề :

/* thử nhiều cách để sửa chiều rộng nhưng không thành công: */
trường tập hợp {
    hiển thị: khối;
    chiều rộng tối thiểu: 0;
    chiều rộng tối đa: 100%;
    chiều rộng: 100%;
    tràn văn bản: clip;
}

div.wrapper {
    chiều rộng: 100%;
}

lựa chọn {
    tràn: ẩn;
}

biết thêm chi tiết

Vấn đề này cũng xảy ra trong ví dụ jsFiddle toàn diện hơn, phức tạp hơn , tương tự với trang web mà tôi thực sự đang cố sửa. Nó có thể được nhìn thấy từ Không thành vấn đề – khối nội tuyến phân chiaCũng không thể thay đổi kích thước. Mặc dù ví dụ này phức tạp hơn nhưng tôi nghĩ cách khắc phục cho trường hợp đơn giản ở trên cũng sẽ khắc phục được trường hợp phức tạp hơn này.

[EDIT: Xem chi tiết hỗ trợ trình duyệt bên dưới. ]

Một điều kỳ lạ về vấn đề này là nếu bạn đặt div.wrapper { chiều rộng: 50%; } , Dừng thay đổi kích thước chính nó tại thời điểm này, sau đó kích thước đầy đủ Sẽ chạm vào mép của khung nhìn. thay đổi kích thước như có chiều rộng: 100% ,mặc dù có vẻ như nó có chiều rộng: 50% .



Nếu bạn đưa cho chính nó chiều rộng: 50% , hiện tượng này không xảy ra; chiều rộng được đặt chính xác.



Tôi không hiểu lý do cho sự khác biệt này. Nhưng nó có thể không liên quan.

Tôi cũng tìm thấy một vấn đề rất giống HTML fieldset cho phép trẻ em mở rộng vô hạn .Asker không thể tìm ra giải pháp và đoán rằng không có giải phápngoại trừ xóa .nhưng tôi muốn biết liệu điều đó có thực sự không thể thực hiện được không Hiển thị chính xác, tại sao? Có gì ở đó của đặc điểm kỹ thuậthoặc CSS mặc định ( kể từ câu hỏi này ) gây ra hành vi này? Hành vi cụ thể này có thể được ghi lại ở đâu đó vì nhiều trình duyệt hoạt động theo cách này.

Mục tiêu và yêu cầu cơ bản

Lý do tôi đang cố gắng thực hiện điều này là một phần của việc viết kiểu di động cho một trang hiện có có biểu mẫu lớn. Biểu mẫu có nhiều phần, một số phần được gói gọn trong ở giữa. .Trên điện thoại thông minh của bạn (hoặc nếu bạn thu nhỏ cửa sổ trình duyệt), với Phần của trang rộng hơn nhiều so với phần còn lại của bảng. Hầu hết các biểu mẫu đều giới hạn chiều rộng của chúng một cách hợp lý, nhưng với Một phần sẽ không buộc người dùng phải thu nhỏ hoặc cuộn sang phải để xem toàn bộ nội dung trong phần đó.

Tôi quan tâm đến việc đơn giản là loại bỏ Hãy thận trọng vì nó được tạo trên nhiều trang của một ứng dụng lớn và tôi không chắc bộ chọn nào trong CSS hoặc JavaScript có thể phụ thuộc vào nó.

Tôi có thể sử dụng JavaScript nếu cần, giải pháp JavaScript vẫn tốt hơn là không có gì. Nhưng nếu JavaScript là cách duy nhất để làm điều này thì tôi rất muốn nghe lời giải thích tại sao không thể thực hiện được điều này chỉ bằng CSS và HTML.

EDIT: Hỗ trợ trình duyệt

Trên trang web, tôi cần hỗ trợ Internet Explorer 8 trở lên (chúng tôi vừa bỏ hỗ trợ cho IE7), Firefox mới nhất và Chrome mới nhất. Trang cụ thể này cũng sẽ hoạt động trên điện thoại thông minh iOS và Android. Internet Explorer 8 có thể chấp nhận hoạt động hơi xuống cấp nhưng vẫn có thể sử dụng được.

Tôi đã thi lại của tôi bị hỏng tập hợp trường ví dụtrên các trình duyệt khác nhau. Nó thực sự đã hoạt động trong các trình duyệt này:

Internet Explorer 8, 9 và 10

Mạ crôm

Chrome dành cho Android

Nó bị hỏng trong các trình duyệt này:

Firefox

Firefox dành cho Android

Trình duyệt Internet Explorer 7

Do đó, trình duyệt duy nhất tôi quan tâm đến việc phá mã hiện tại của mình là Firefox (trên máy tính để bàn và thiết bị di động). Nếu mã được sửa để nó hoạt động trong Firefox mà không bị hỏng trong bất kỳ trình duyệt nào khác, điều đó sẽ giải quyết được vấn đề của tôi.

Mẫu HTML của trang web sử dụng các nhận xét có điều kiện của Internet Explorer để thêm các lớp, chẳng hạn như .ie8Và .người giàđến yếu tố. Nếu bạn cần giải quyết sự khác biệt về kiểu dáng trong IE, bạn có thể sử dụng các lớp này trong CSS. Đã thêm lớp với phiên bản cũ này của HTML5 Boilerplate Tương tự trong .