Tôi có thể kéo dài văn bản trong CSS không? Tôi không muốn phông chữ lớn hơn, vì điều đó làm cho nó xuất hiện đậm nét hơn văn bản nhỏ hơn bên cạnh nó. Tôi chỉ muốn kéo dài văn bản theo chiều dọc để nó bị biến dạng. Đây sẽ là một div, và sau đó văn bản bình thường bên cạnh nó sẽ ở một div khác. Tôi có thể làm cái này như thế nào?

Có, bạn thực sự có thể với CSS 2D Transforms. Điều này được hỗ trợ trong hầu hết các trình duyệt hiện đại, bao gồm IE9 +. Đây là một ví dụ.

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 */
}

MIPO: Bạn có thể cần thêm lề vào văn bản kéo dài của mình để ngăn xung đột văn bản.

Tôi sẽ trả lời cho việc kéo dài văn bản theo chiều ngang, vì chiều dọc là phần dễ dàng - chỉ cần sử dụng "biến đổi: 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>

khoảng cách chữ cái chỉ thêm không gian giữa các chữ cái, không kéo dài gì, nhưng nó hơi tương đối

chặn nội tuyến vì các thành phần nội tuyến quá hạn chế và mã bên dưới sẽ không hoạt động khác

Bây giờ sự kết hợp tạo nên sự khác biệt

cỡ chữ để đạt được kích thước chúng ta muốn - theo cách đó, văn bản sẽ thực sự có độ dài như vậy và văn bản trước và sau nó sẽ xuất hiện bên cạnh nó (scaleX chỉ để hiển thị, trình duyệt vẫn nhìn thấy phần tử ở kích thước ban đầu của nó khi định vị các yếu tố khác).

scaleY để giảm chiều cao của văn bản, sao cho nó giống với văn bản bên cạnh nó.

biến đổi-nguồn gốc để làm cho quy mô văn bản từ đầu dòng.

đáy lề được đặt thành giá trị âm, sao cho dòng tiếp theo sẽ không ở dưới mức - tốt nhất là tỷ lệ phần trăm, do đó chúng tôi sẽ không thay đổi thuộc tính chiều cao của dòng. căn dọc được đặt thành trên cùng, để ngăn văn bản trước hoặc sau nổi lên các độ cao khác (vì văn bản được kéo dài có kích thước thực là 32px)

- Phần tử span đơn giản có kích thước phông chữ, chỉ làm tham chiếu.

Câu hỏi yêu cầu một cách để ngăn chặn sự táo bạo của văn bản gây ra bởi sự kéo dài và tôi vẫn chưa đưa ra, NHƯNG thuộc tính trọng lượng phông chữ có nhiều giá trị hơn chỉ bình thường và đậm .

Tôi biết, bạn không thể thấy điều đó, nhưng nếu bạn tìm kiếm các phông chữ phù hợp , bạn có thể sử dụng nhiều giá trị hơn.

Về mặt kỹ thuật, không. Nhưng những gì bạn có thể làm là sử dụng kích thước phông chữ cao như bạn muốn phông chữ được kéo dài, và sau đó ngưng tụ nó theo chiều ngang font-stretch.

Cách duy nhất tôi có thể nghĩ cho các văn bản ngắn như "MENU" là đặt từng chữ cái trong một khoảng và biện minh chúng trong một thùng chứa sau đó. Như thế này:

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

Và sau đó là CSS:

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

...

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

CSS font-Stretch hiện được hỗ trợ trong tất cả các trình duyệt chính (trừ iOS Safari và Opera Mini). Thật không dễ dàng để tìm thấy một họ phông chữ phổ biến hỗ trợ mở rộng phông chữ, nhưng rất dễ tìm thấy các phông chữ hỗ trợ ngưng tụ, ví dụ:

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

Luôn quay trở lại trang này khi một nhà thiết kế kéo dài một phông chữ trên tôi. Giải pháp được chấp nhận hoạt động rất tốt, nhưng tôi thường xuyên gặp vấn đề với lợi nhuận.

Sẽ khuyên bạn nên sử dụng biến đổi về chiều cao thay vì chiều rộng nếu bạn gặp sự cố, là cách an toàn hơn cho tôi trong dự án hiện tại của tôi.

.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);
}