Bảo quản gói từ bình thường bên trong thùng chứa hoàn toàn định vị

Question

Tôi có một khối văn bản được định vị hoàn toàn bên trong một thùng chứa tương đối định vị. Phần tử được định vị hoàn toàn vượt quá ranh giới bên phải của vùng chứa của nó.

Vấn đề là: văn bản không được gói như bình thường; nó phá vỡ sớm hơn là mở rộng để nó được xác định max-width:

hành vi quan sát được:

hành vi mong muốn

HTML/CSS (012.):

<style> 
.container { 
    position: relative; 
    width: 300px; 
    background: #ccc; 
    height: 100px; 
} 

.text { 
    position: absolute; 
    max-width: 150px; 
    left: 290px; 
    top: 10px; 
    background: lightblue; 
} 
</style> 

<div class="container"> 
    <div class="text">Lorem ipsum dolor sit amet</div> 
</div> 

Lưu ý: Một vài thay đổi mà xuất hiện để đạt được các hành vi mong muốn, nhưng mà không khá gì tôi đang tìm kiếm, bao gồm:

• định min-width: 150px trên .text (các văn bản có thể chỉ là một từ và tôi không muốn vùng chứa quá khổ)
• định vị .text. liên quan đến tài liệu, chứ không phải để .container (nó cần phải xuất hiện bên cạnh các thùng chứa, thậm chí khi trình duyệt được thay đổi kích cỡ)

Answer 1

Hãy thử sử dụng position: relative; trên .text

EDIT: Cũng đặt nó bên trong một wrapper vị trí tuyệt đối với tùy chỉnh max-width của bạn

CSS

.container { 
    position: relative; 
    width: 300px; 
    background: #ccc; 
    height: 300px; 
} 

.wrap_text { 
    position: absolute; 
    max-width: 200px; 
    top: 10px; 
} 

.text { 
    position: relative; 
    left: 290px; 
    background: lightblue; 
} 

Và HTML:

<div class="container"> 
    <div class="wrap_text"> 
     <div class="text"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
</div> 

Answer 2

thay đổi vị trí tuyệt đối thành tương đối và bọc .text trong phần tử được định vị hoàn toàn.

http://jsfiddle.net/WmcjM/4/

.container { 
    position: relative; 
    width: 300px; 
    background: #ccc; 
    height: 300px; 
} 

.text { 
    position: relative; 
    /*min-width: 200px;*/ 
    left: 290px; 
    background: lightblue; 
} 

.wrap { 
    position: absolute; 
    max-width: 200px; 
    top: 10px; 
}