ระบุความกว้างเป็น * ตัวอักษร *

109

เมื่อใช้แบบอักษรความกว้างคงที่ผมต้องการระบุความกว้างขององค์ประกอบ HTML ในตัวละคร

หน่วย "em" ควรมีความกว้างของอักขระ M ดังนั้นฉันจึงควรใช้เพื่อระบุความกว้างได้ นี่คือตัวอย่าง:

<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>

ผลลัพธ์ไม่ใช่สิ่งที่ฉันต้องการเนื่องจากบรรทัดเบราว์เซอร์แตกหลังจากคอลัมน์ 15 ไม่ใช่ 10:

1 3 5 7 9 1 3 5
7 9 1

(ผลลัพธ์ใน Firefox และ Chromium ทั้งใน Ubuntu)

บทความของ Wikipediaระบุว่า "em" ไม่ใช่ความกว้างของ M เสมอไปดังนั้นจึงดูเหมือนว่าหน่วย "em" จะไม่สามารถเชื่อถือได้สำหรับสิ่งนี้

css font-size

— Martin Vilcans
แหล่งที่มา

ฉันเชื่อว่า "en" เป็นความกว้างทางกฎหมายเช่นกัน มันคือความกว้างของตัวเลขในการพิมพ์ นั่นอาจจะได้ผลดีกว่าสำหรับคุณ

— พีทวิลสัน

คุณสมบัติ 'em' ใช้ขนาดแบบอักษรหรือความสูงของแบบอักษรไม่ใช่ความกว้างของตัวอักษร @Pete: มันไม่ได้ดูค่า CSS และหน่วยโมดูลระดับที่ 3

— animuson

อักขระที่แตกต่างกันจะมีความกว้างต่างกันเว้นแต่คุณจะใช้แบบอักษรที่มีความกว้างคงที่ ดังนั้นจึงเป็นไปไม่ได้ที่จะกำหนดความกว้างตามจำนวนอักขระที่แสดง

— Emily

เป็นไปได้ที่จะซ้ำกันของวิธีตั้งค่าความกว้างของ <div> เพื่อให้พอดีกับจำนวนตัวอักษรคงที่ในแบบอักษร monospace

— Martin Vilcans

"คำถามนี้ยังคงต้องการการโหวต 4 ครั้งจากผู้ใช้รายอื่นเพื่อปิด" - นี่คือคำถามของฉัน! ให้ฉันปิด!

— Martin Vilcans

คำตอบ:

1em คือความสูงของ M แทนที่จะเป็นความกว้าง เหมือนกันสำหรับ ex ซึ่งก็คือความสูงของ x โดยทั่วไปแล้วความสูงของตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก

ความกว้างเป็นปัญหาที่แตกต่างกันโดยสิ้นเชิง ....

เปลี่ยนตัวอย่างของคุณด้านบนเป็น

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

และคุณจะสังเกตเห็นความกว้างและความสูงของช่วงแตกต่างกัน สำหรับแบบอักษรขนาด 20px บน Chrome สแปนคือ 12x22 พิกเซลโดยที่ 20px คือความสูงของแบบอักษรและ 2px สำหรับความสูงของบรรทัด

ตอนนี้เนื่องจาก em และ ex ไม่มีประโยชน์ที่นี่กลยุทธ์ที่เป็นไปได้สำหรับโซลูชัน CSS เท่านั้นจึงเป็นไปได้

สร้างองค์ประกอบที่มีเพียง & nbsp;
ปล่อยให้มันปรับอัตโนมัติเอง
วาง div ของคุณภายในและ
ทำให้ใหญ่เป็น 10 เท่าขององค์ประกอบโดยรอบ

อย่างไรก็ตามฉันไม่ได้จัดการโค้ดนี้ ฉันยังสงสัยว่ามันเป็นไปได้จริงๆ

อย่างไรก็ตามสามารถใช้ตรรกะเดียวกันใน Javascript ได้ ฉันใช้ jQuery แพร่หลายที่นี่:

<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 ใน (w * 10 + 1) คือการจัดการปัญหาการปัดเศษ

— Gerd Riesselmann
แหล่งที่มา

ฉันหวังว่าจะได้โซลูชัน CSS ที่บริสุทธิ์ซึ่งจะเป็นไปได้ก็ต่อเมื่อคุณทราบอัตราส่วนระหว่างความสูงและความกว้างของอักขระ (ดูstackoverflow.com/questions/1255281/… ) ฉันยอมรับสิ่งนี้เป็นคำตอบเพราะดูเหมือนว่าจะเป็นทางออกที่ดี

— Martin Vilcans

1em ไม่ใช่ความสูงของ M ตามคำตอบที่นี่graphicdesign.stackexchange.com/questions/4035/… "|" อักขระควรใกล้เคียงกับ 1em มากขึ้น

— Sogartar

Sogartar เพื่อความชัดเจน: ในการพิมพ์ที่เหมาะสม 1 em คือความกว้าง (เช่นเดียวกับความสูงของ em) ของอักขระที่มีความกว้างคงที่ อย่างไรก็ตามนั่นคือ "การพิมพ์ที่เหมาะสม" และเรามีผู้คนจำนวนมากที่สร้างไฟล์ฟอนต์ที่ไม่เป็นไปตามกฎการพิมพ์โดยเฉพาะอย่างยิ่งในกรณีของแบบอักษรบนเว็บ ประเด็นของความคิดเห็นของฉันที่นี่ไม่ใช่ (เป็นเพียงความยิ่งใหญ่) ประเด็นของฉันคือทดสอบทดสอบทดสอบ (แล้วทดสอบเพิ่มเติม)

— Parapluie

222

`ch` หน่วย

chหน่วยที่คุณกำลังมองหาอยู่ ตามเอกสาร MDN :

ch: หมายถึงความกว้างหรืออย่างแม่นยำมากขึ้นวัดล่วงหน้าของสัญลักษณ์ "0" (ศูนย์, อักขระ Unicode U + 0030) fontในองค์ประกอบ

ได้รับการสนับสนุนในเบราว์เซอร์หลักรุ่นปัจจุบัน ( caniuse )

ตัวอย่าง

pre {
    width: 80ch; /* classic terminal width for code sections */
}

— ทรานซิสเตอร์ 09
แหล่งที่มา

นอกจากนี้ยังมีช่องว่างรูปซึ่ง "เท่ากับความกว้างของตัวเลขหนึ่งหลัก" ตามที่อธิบายไว้ในบทความเว้นวรรค (เครื่องหมายวรรคตอน)ของ Wikipedia ค่า Unicode มันเป็น U + ปี 2007 และก็สามารถที่จะเข้ามาในรูปแบบ HTML ใช้หรือ   มันทำงานได้เทียบเท่ากับchหน่วยของ CSS แต่แม้ว่าจะไม่ได้รับการสนับสนุนอย่างกว้างขวาง แต่ก็สามารถใช้เป็นวิธีแก้ปัญหาใน HTML ได้ (แฮ็คที่น่าเกลียด แต่ควรใช้งานได้)

— waldyrious

อันที่จริงตามปัญหาโครเมียมนี้ Chrome รองรับตั้งแต่ v27 ดังนั้นตอนนี้เบราว์เซอร์หลักทั้งหมด (IE, Chrome และ Firefox) เวอร์ชันล่าสุดจึงรองรับหน่วย ch :)

— waldyrious

สิ่งที่ควรทราบคือขนาดอักขระคือขนาดของสัญลักษณ์ '0' ในแบบอักษรขององค์ประกอบ หากคุณคาดหวังว่าจะมีอักขระขนาดใหญ่เช่น "m" หรือ "w" คุณอาจต้องการพิจารณาขยายตามหรือขยายตามต้องการ (เช่นstackoverflow.com/questions/7168727/… )

— user420667

ใช่ไม่มีปัญหากับฟอนต์แบบ monospaced

— Willege

IE11 รองรับผิด stackoverflow.com/questions/17825638/…

— aleha

ระบุความกว้างเป็น * ตัวอักษร *

ch หน่วย

ตัวอย่าง

`ch` หน่วย