Làm cách nào để làm cho văn bản tự động thu nhỏ để vừa với div?

Tôi biết tôi có thể điều chỉnh kích thước phông chữ, nhưng tôi muốn nó co lại để phù hợp với div tự động khi được xem trên một nền tảng khác có kích thước phông chữ khác nhau chẳng hạn.Làm cách nào để làm cho văn bản tự động thu nhỏ để vừa với div?

Xem fiddle: http://jsfiddle.net/08pyzgx4/

<body> 
    <div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png);  background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#000;  text-align:center; padding-top:12px;"><b>Bla Bla Bla Bla Bla Bla </b> 

     <div style="height:16px; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"><strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong>[email protected] | <strong>Control Centre: </strong>08600-22-blabla</div> 
    </div> 
</body>

Nguồn

2015-02-19 Chips147

Quên đề cập đến, tôi đề cập đến nội dung bên dưới tiêu đề ... – Chips147

Tôi cũng không muốn sử dụng jquery. css và html chỉ – Chips147

Vì vậy, sử dụng 'em' thay vì' pixel', nó sẽ đề cập đến kích thước phông chữ chuẩn hóa và sẽ điều chỉnh theo kích thước. –

Bạn nên đặt width as 100% và max-width như giá trị (600px trong bạn trường hợp).

Đây là một ví dụ qucik chỉ để cho bạn thấy đúng cách, vì vậy bây giờ bạn có thể tạo kiểu cho nó theo ý muốn.

http://jsfiddle.net/08pyzgx4/1/

Hãy nhớ rằng để tăng khả năng văn bản, div nên luôn luôn có một chiều rộng tỷ lệ phần trăm (và tắt tất nhiên là max-width nếu bạn cần một)

Sau đó, chỉ cần sử dụng một vài truy vấn phương tiện truyền thông để điều chỉnh vị trí văn bản trên các độ phân giải khác nhau và phải sẵn sàng

Nguồn

2015-02-19 10:13:18 Nick

Cảm ơn bạn, có cách nào để làm cho thông tin liên hệ ở lại như một dòng bằng cách thu nhỏ kích thước phông chữ không? – Chips147

kiểm tra câu trả lời này SO: http://stackoverflow.com/questions/15649244/responsive-font-size http://stackoverflow.com/questions/13358181/resize-font-size-according-to-div- kích thước http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container, nhưng nó đường nối như là không thực sự có thể với chỉ css – Nick

Hmm, cảm ơn bạn. Có nó như tôi lo sợ, và tôi cũng giới hạn trong css nội tuyến bởi vì đây là mệnh để được một email hàng loạt .... – Chips147

Bạn có thể làm như thế này .... và đừng quên thêm thư viện js.

đây là fiddle ... http://jsfiddle.net/f6sx474j/ Hãy thử bằng cách tăng văn bản tôi đã kiểm tra và hoạt động bình thường.

<div style="width:600px; 
height:58px; 
max-width: 600px; 
background-image:url(http://itrace.co.za/images/emailfiles/banner.png); 
background-repeat:no-repeat; 
display:block; max-width: 600px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:19px; color:#000;  
text-align:center; padding-top:12px;"> 
<b>Bla Bla Bla Bla Bla Bla </b> 
<div id="abc" style="height:16px; 
display: inline-block; 
max-height:16px; 
padding-left:88px; 
padding-right:88px; 
margin-top:18px; 
font-size:0.6em; 
letter-spacing:-0.02em; 
    position:relative;"> 
<strong>Website: </strong>www.blabla.co.za | 
<strong>E-mail: </strong> 
[email protected] [email protected] [email protected] 
<strong>Control Centre: </strong> 
08600-22-blabla</div> 
</div>

// Và đây là js của bạn

<script type="text/javascript"> 
$(function() { 
var div = $('#abc'); 
var fontSize = parseInt(div.css('font-size')); 
do { 
    fontSize--; 
    div.css('font-size', fontSize.toString() + 'px'); 
    } while (div.width() >= 400); 
    }); 
</script>

Nguồn

2015-02-19 19:27:15

Cảm ơn bạn rất nhiều người đàn ông ... – Chips147

chào mừng và cảm ơn người bạn của tôi –

Hãy nhớ đánh dấu câu trả lời nếu nó giải quyết được vấn đề của bạn .. –

Làm cách nào để làm cho văn bản tự động thu nhỏ để vừa với div?

Trả lời

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