Chỉ định chiều rộng bằng * ký tự *

108

Khi sử dụng phông chữ có chiều rộng cố định , tôi muốn chỉ định chiều rộng của một phần tử HTML bằng các ký tự .

Đơn vị "em" được cho là chiều rộng của ký tự M, vì vậy tôi có thể sử dụng nó để chỉ định chiều rộng. Đây là một ví dụ:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

Kết quả không như tôi muốn vì dòng trình duyệt bị ngắt sau cột 15, không phải 10:

1 3 5 7 9 1 3 5
7 9 1

(Kết quả trên Firefox và Chromium, cả trong Ubuntu.)

Bài viết của Wikipedia nói rằng "em" không phải lúc nào cũng bằng chiều rộng của chữ M, vì vậy chắc chắn có vẻ như đơn vị "em" không thể đáng tin cậy cho điều này.

css  font-size 
— Martin Vilcans
nguồn
Tôi tin rằng "en" cũng là một chiều rộng hợp pháp; đó là chiều rộng của một chữ số trong kiểu chữ. Điều đó có thể làm việc tốt hơn cho bạn.
— Pete Wilson
6
Thuộc tính 'em' sử dụng kích thước phông chữ hoặc chiều cao của phông chữ, không sử dụng chiều rộng của các chữ cái. @Pete: Không phải vậy, hãy xem Giá trị CSS và Đơn vị Mô-đun Cấp 3 .
— animuson
Trừ khi bạn đang sử dụng phông chữ có độ rộng cố định, các ký tự khác nhau có độ rộng khác nhau. Do đó, về mặt chức năng không thể thiết lập chiều rộng về số lượng ký tự được hiển thị.
— Emily
— Martin Vilcans
"Câu hỏi này vẫn cần 4 (các) phiếu bầu từ những người dùng khác để đóng" - Này, đây là câu hỏi của tôi! Để tôi đóng lại!
— Martin Vilcans

Câu trả lời:

23

1em là chiều cao của M, thay vì chiều rộng. Tương tự đối với ex, là chiều cao của x. Nói một cách tổng quát hơn, đây là độ cao của chữ hoa và chữ thường.

Chiều rộng là một vấn đề hoàn toàn khác ...

Thay đổi ví dụ của bạn ở trên thành 

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

và bạn sẽ nhận thấy chiều rộng và chiều cao của nhịp là khác nhau. Đối với kích thước phông chữ 20px trên Chrome, khoảng cách là 12x22 px, trong đó 20px là chiều cao của phông chữ và 2px là chiều cao dòng.

Bây giờ vì em và cũ không được sử dụng ở đây, nên một chiến lược khả thi cho giải pháp chỉ CSS sẽ là

  1. Tạo một phần tử chỉ chứa & nbsp;
  2. Hãy để nó tự động kích thước
  3. Đặt div của bạn trong và
  4. Làm cho nó lớn gấp 10 lần phần tử xung quanh.

Tuy nhiên, tôi đã không quản lý để viết mã này. Tôi cũng nghi ngờ nó thực sự là có thể.

Tuy nhiên, cùng một logic có thể được thực hiện trong Javascript. Tôi đang sử dụng jQuery phổ biến ở đây:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

+1 trong (w * 10 + 1) là để xử lý các vấn đề làm tròn.

— Gerd Riesselmann
nguồn
1
Tôi đã hy vọng một giải pháp CSS thuần túy, điều này chỉ khả thi nếu bạn tình cờ biết tỷ lệ giữa chiều cao và chiều rộng của một ký tự (xem stackoverflow.com/questions/1255281/… ). Tôi chấp nhận đây là câu trả lời vì nó có vẻ là một giải pháp mạnh mẽ.
— Martin Vilcans
1em không phải là chiều cao của chữ M theo các câu trả lời ở đây graphicdesign.stackexchange.com/questions/4035/… Dấu "|" ký tự phải gần với 1em.
— Sogartar
1
Sogartar, để làm rõ: trong typography, 1 em thực sự là chiều rộng (cũng như chiều cao em) của một ký tự có chiều rộng cố định. Tuy nhiên, đó là "kiểu chữ thích hợp" và chúng tôi có nhiều người hàng đêm đang tạo ra các tệp phông chữ không tuân thủ các quy tắc về kiểu chữ - đặc biệt đúng trong trường hợp phông chữ web. Điểm nhận xét của tôi ở đây không phải (chỉ đơn thuần) vĩ đại một cách khoa trương. Quan điểm của tôi là: kiểm tra, kiểm tra, kiểm tra. (Và sau đó kiểm tra thêm một số nữa.)
— Parapluie
217

ch đơn vị

Đơn vị bạn đang tìm kiếm là ch. Theo tài liệu MDN :

ch: Đại diện cho chiều rộng, hay chính xác hơn là số đo trước, của ký tự "0" (số không, ký tự Unicode U + 0030) trong phần tử font.

Nó được hỗ trợ trong các phiên bản hiện tại của các trình duyệt chính ( caniuse ).

Thí dụ

pre {
    width: 80ch; /* classic terminal width for code sections */
}
— bóng bán dẫn09
nguồn
3
Ngoài ra còn có không gian hình , chính xác là "bằng chiều rộng của một chữ số" như được mô tả trong bài viết về khoảng trắng (dấu câu) của Wikipedia . Giá trị Unicode của nó là U + 2007 và nó có thể được nhập vào HTML bằng cách sử dụng &#x2007;hoặc &#8199;. Nó có chức năng tương đương với chđơn vị CSS, nhưng mặc dù không được hỗ trợ rộng rãi, nhưng nó có thể được sử dụng như một giải pháp thay thế trong HTML (hack xấu xí, nhưng sẽ hoạt động).
— waldyrious
2
Trên thực tế, theo vấn đề chromium này , Chrome hỗ trợ nó từ v27, vì vậy ngay bây giờ các phiên bản mới nhất của tất cả các trình duyệt chính (IE, Chrome và Firefox) đều hỗ trợ đơn vị ch :)
— waldyrious
2
Cần lưu ý rằng kích thước ký tự là kích thước của glyph '0' trong phông chữ của phần tử. Nếu bạn mong đợi các nhân vật lớn hơn như 'm' hoặc 'w' bạn có thể muốn xem xét việc mở rộng phù hợp hoặc có nó mở rộng khi cần thiết (ví dụ stackoverflow.com/questions/7168727/... )
— user420667
1
Đúng, không có vấn đề gì với phông chữ monospaced.
— Willege
2
IE11 hỗ trợ nó sai. stackoverflow.com/questions/17825638/…
— aleha
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.