Văn bản tràn trên cả bên trái và bên phải

Làm cách nào để căn giữa văn bản bằng css để nó tràn cả trái và phải? Tôi thấy câu hỏi ở đây mà làm tràn văn bản trái thay quyền, nhưng tôi muốn nó trông giống như văn bản được phóng toVăn bản tràn trên cả bên trái và bên phải

<body> 
    <div class="page"> 
     SOMEHEADER 
    </div> 
</body>

.page { 
    overflow:hidden; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
}

Dưới đây là một fiddle với một bản demo của những gì tôi đang nói về.

Nguồn

2012-12-24 mehulkar

Xem demo này: http://jsfiddle.net/QZCuY/3/ Tôi đã thử nghiệm nó trong Chrome mới nhất, FF và IE7-9

HTML (<div class="text"> gia tăng):

<div class="page"> 
    <div class="text"> 
     SOMEHEADER 
    </div> 
</div> 
<p> 
    How do I get the header to overflow left <u>and</u> right instead of just to the right? 
</p>

CSS (.page có hai thuộc tính mới và mới .text class):

body { 
    background-color:green; 
} 
.page { 
    position:relative; 
    height:1em; 

    overflow:hidden; 
    background-color:red; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
} 
p { 
    width:70%; 
    margin:50px auto 0; 
    text-align:center; 
    font-size:2em; 
} 

.text { 
    position:absolute; 
    right:-50%; 
    left:-50%; 
}

Nguồn

2012-12-24 10:54:59

Không phải là giải pháp thanh lịch nhất, nhưng có vẻ như nó hoạt động.

HTML:

<div class="page"> 
    <div> 
     SOMEHEADER 
    </div> 
</div>

CSS:

.page > div { 
    margin: 0 -1000%; 
}

Ví dụ: http://jsfiddle.net/grc4/w36mX/

Phương pháp này hoạt động bằng cách duỗi div bên trong như vậy mà nó là đủ rộng để phù hợp với nội dung của nó hoàn toàn (không có gói/tràn). Nội dung sau đó được căn giữa (text-align: center) và được cắt bớt theo kích thước bằng div ngoài (overflow: hidden).

Phần khó khăn là làm cho div bên trong đủ rộng để vừa với văn bản. Bất cứ khi nào nó không đủ rộng, văn bản sẽ tràn sang bên phải để văn bản không được căn giữa (như đã thấy trong jsFiddle ban đầu của bạn).

Bằng cách sử dụng negative margins, bạn có thể kéo giãn phần tử theo một mức nhất định cho cả bên trái và bên phải. Nếu bạn biết rằng kích thước của văn bản là 400px chẳng hạn, thì bạn có thể sử dụng margin: 0 -200px để đảm bảo rằng div bên trong luôn rộng ít nhất 400px (200px bên trái và 200px bên phải). Khi bạn không biết kích thước chính xác của văn bản, bạn có thể sử dụng tỷ lệ phần trăm hoặc giá trị px thực sự cao.

margin: 0 -100% sẽ kéo dài div bằng 100% kích thước ban đầu của nó sang trái và 100% lần nữa ở bên phải, làm cho nó lớn hơn 3 lần so với div .page. Văn bản rộng khoảng 900px, vì vậy phương pháp này sẽ ngừng hoạt động nếu div .page có chiều rộng dưới 300px (hãy thử đổi kích thước trình duyệt của bạn trong jsFiddle bằng margin: 0 -100% để xem ý tôi là gì).

margin: 0 -1000% kéo dài div để tăng gấp 21 lần, thường đủ để vừa với văn bản.

Nguồn

2012-12-24 10:56:11 grc

+1 Giải pháp đơn giản hơn tôi –

Công trình này tuyệt vời. Bạn có thể giải thích lý do tại sao nó hoạt động? '-1000%' của cái gì? Ngoài ra, '-100%' có vẻ giống nhau? – mehulkar

Tôi đã thêm một lời giải thích. – grc

Văn bản tràn trên cả bên trái và bên phải

Trả lời

Các vấn đề liên quan