ฉันสามารถยืดข้อความใน CSS ได้หรือไม่? ฉันไม่ต้องการให้ฟอนต์ใหญ่ขึ้นเพราะมันทำให้ตัวอักษรดูโดดเด่นกว่าข้อความขนาดเล็กที่อยู่ข้างๆ ฉันแค่ต้องการยืดข้อความในแนวตั้งเพื่อให้มันผิดรูป นี่จะอยู่ใน div หนึ่งจากนั้นข้อความปกติที่อยู่ข้างๆจะอยู่ใน div อื่น ฉันจะทำเช่นนี้ได้อย่างไร?

ใช่คุณสามารถใช้ CSS 2D Transforms ได้ รองรับในเบราว์เซอร์สมัยใหม่เกือบทั้งหมดรวมถึง IE9 + นี่คือตัวอย่าง

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

เคล็ดลับ:คุณอาจต้องเพิ่มระยะขอบให้กับข้อความที่ยืดออกเพื่อป้องกันไม่ให้ข้อความชนกัน

ฉันจะตอบสำหรับการยืดข้อความในแนวนอนเนื่องจากแนวตั้งเป็นส่วนที่ง่าย - เพียงใช้ "transform: scaleY ()"

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

การเว้นระยะห่างระหว่างตัวอักษรเพียงแค่เพิ่มช่องว่างระหว่างตัวอักษรไม่มีอะไรเลย แต่มันเป็นญาติกัน

อินไลน์บล็อกเนื่องจากองค์ประกอบแบบอินไลน์มีข้อ จำกัด เกินไปและโค้ดด้านล่างจะไม่สามารถใช้งานได้

ตอนนี้การผสมผสานที่สร้างความแตกต่าง

ขนาดตัวอักษรเพื่อให้ได้ขนาดที่เราต้องการ - วิธีนี้ข้อความจะมีความยาวตามที่ควรจะเป็นและข้อความก่อนและหลังจะปรากฏถัดจากนั้น (scaleX เป็นเพียงการแสดง แต่เบราว์เซอร์ยังคงเห็นองค์ประกอบ ที่ขนาดเดิมเมื่อวางตำแหน่งองค์ประกอบอื่น ๆ )

scaleYเพื่อลดความสูงของข้อความเพื่อให้เหมือนกับข้อความที่อยู่ข้างๆ

transform-originเพื่อสร้างมาตราส่วนข้อความจากด้านบนของบรรทัด

margin-bottomตั้งค่าเป็นค่าลบเพื่อไม่ให้บรรทัดถัดไปอยู่ต่ำกว่ามากโดยเฉพาะอย่างยิ่งเปอร์เซ็นต์เพื่อที่เราจะไม่เปลี่ยนคุณสมบัติ line-height แนวตั้งตั้งไว้ด้านบนเพื่อป้องกันไม่ให้ข้อความก่อนหรือหลังลอยไปที่ความสูงอื่น ๆ (เนื่องจากข้อความที่ยืดมีขนาดจริง 32px)

- องค์ประกอบช่วงอย่างง่ายมีขนาดตัวอักษรเป็นข้อมูลอ้างอิงเท่านั้น

คำถามที่ถามหาวิธีที่จะป้องกันไม่ให้เกิดความกล้าหาญของข้อความที่เกิดจากการยืดและฉันยังไม่ได้รับอย่างใดอย่างหนึ่ง แต่font-weightทรัพย์สินมีค่ามากกว่าแค่เรื่องปกติและเป็นตัวหนา

ฉันรู้ว่าคุณไม่เห็นสิ่งนั้น แต่ถ้าคุณค้นหาแบบอักษรที่เหมาะสมคุณสามารถใช้ค่าเพิ่มเติมได้

กลับมาที่หน้านี้เสมอเมื่อนักออกแบบยืดแบบอักษรให้ฉัน วิธีแก้ปัญหาที่ได้รับการยอมรับใช้งานได้ดี แต่ฉันมักพบปัญหาเกี่ยวกับระยะขอบ

ขอแนะนำให้ใช้การแปลงความสูงแทนความกว้างหากคุณประสบปัญหาชีวิตในโครงการปัจจุบันของฉันปลอดภัยกว่าสำหรับฉัน

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}

ในทางเทคนิคไม่ แต่สิ่งที่คุณสามารถทำได้คือการใช้ขนาดตัวอักษรที่สูงเท่าที่คุณต้องการแบบอักษรยืดจะเป็นและจากนั้นก็font-stretchรวมตัวแนวนอนด้วย

วิธีเดียวที่ฉันคิดได้สำหรับข้อความสั้น ๆ เช่น "MENU" คือใส่ตัวอักษรทุกตัวในช่วงหนึ่งและจัดเรียงไว้ในภาชนะในภายหลัง แบบนี้:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

แล้ว CSS:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

ตอนนี้ CSS font-stretch รองรับเบราว์เซอร์หลัก ๆ ทั้งหมดแล้ว (ยกเว้น iOS Safari และ Opera Mini) ไม่ใช่เรื่องง่ายที่จะค้นหาตระกูลฟอนต์ทั่วไปที่รองรับฟอนต์ขยาย แต่หาฟอนต์ที่รองรับการควบแน่นได้ง่ายเช่น:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;