지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

HTML에서 글꼴 너비를 제어하는 ​​방법

一个新手
풀어 주다： 2017-09-09 11:05:44
원래의
17549명이 탐색했습니다.

문자 글꼴의 너비를 직접 설정할 수 있는 방법은 없지만 문자 글꼴의 너비를 제어할 수 있는 다른 방법이 있습니다.

단일 문자 글꼴의 너비

단일 문자 글꼴의 너비는 글꼴 크기 속성의 영향을 받습니다.

font-size

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>单个字符字体的宽度</title>
    <style>
        * {            
        margin: 0;            
        border: none;            
        padding: 0;        
        }
        p {           
        margin: 30px auto;            
        text-align: center;        
        }
        p span{          
        line-height: 0;        
        }
        .s{            
        font-size: HTML에서 글꼴 너비를 제어하는 ​​방법;        
        }
        .n{            
        font-size: HTML에서 글꼴 너비를 제어하는 ​​방법;        
        }
        .l{            
        font-size:HTML에서 글꼴 너비를 제어하는 ​​방법;        
        }
    </style>
    </head>
    <body>
    <p class="s">
        <span>田</span>
    </p>
    <p class="n">
        <span>田</span>
    </p>
    <p class="l">
        <span>田</span>
    </p></body></html>
로그인 후 복사

글꼴 너비가 크게 변경됩니다(너비 x 높이):
font-size: HTML에서 글꼴 너비를 제어하는 ​​방법

HTML에서 글꼴 너비를 제어하는 ​​방법

font-size: Normal
HTML에서 글꼴 너비를 제어하는 ​​방법

font-size : Large
HTML에서 글꼴 너비를 제어하는 ​​방법

다중 문자 글꼴의 너비

다중 문자 글꼴의 너비 문자 글꼴의 개수 외에도 제어할 수 있는 몇 가지 다른 속성이 있습니다.
1. text-align

text-align 속성은 요소의 텍스트 가로 정렬을 지정합니다.
이 속성은 줄 상자가 정렬되는 지점을 지정하여 블록 수준 요소 내에서 텍스트의 가로 정렬을 설정합니다.
사용자 에이전트가 줄 내용의 문자와 단어 사이의 간격을 조정할 수 있도록 하여 정당화 값을 지원할 수 있습니다. 다른 사용자 에이전트는 다른 결과를 얻을 수 있습니다.

값 및 설명

ValueDescriptionleft텍스트를 왼쪽으로 정렬합니다. 기본값: 브라우저에 의해 결정됩니다. right텍스트를 오른쪽으로 정렬하세요. center텍스트를 가운데로 정렬하세요. justify텍스트를 양쪽 끝으로 정렬하는 효과를 얻으세요. inherit은 text-align 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

참고: 1text-align 값이 justify일 때 문자 글꼴의 너비를 변경할 수 있다고 하는데, 이것에 대한 속임수의 힌트입니다. 그리고 이 너비는 제어하기가 매우 어렵고 모든 사람이 사용하도록 권장되지는 않습니다.
②모든 브라우저가 text-align:justify 속성을 ​​지원하지만 Firefox와 Chrome의 구현은 여전히 ​​약간 다릅니다. text-align值为justify时可以改变字符字体的宽度，但是这里面有取巧之嫌。并且这个宽度非常的难以控制，不推荐大家使用。
②虽然所有浏览器都支持text-align:justify属性，但是Firefox和Chrome的实现上还是有点不同的。

在chrome浏览器中，在定宽的父元素（块级元素）设置text-align:justify属性之后，这个效果会作用于所有子元素中。

<p style="text-align:justify;width:300px"> 
            <span>这是一段文字，用于自我介绍。</span> 
            <p>这是一段文字，用于自我介绍。</p> 
             </p>
로그인 후 복사

span和p元素内的文字都会两端对齐。

在Firefox浏览器中，在定宽的父元素（块级元素）设置text-align:justify属性之后，这个效果只会作用于块级元素中。

<p style="text-align:justify;width:300px"> 
            <span>这是一段文字，用于自我介绍。</span> 
            <p>这是一段文字，用于自我介绍。</p> 
              </p>
로그인 후 복사

只有p元素内的文字都会两端对齐。

核心代码：

<style>* { margin: 0;border: none;padding: 0;}p {margin: 30px auto; width: 300px;}p p{border: 1px solid #000;}</style>
 <p>
    <span>这是一段文字，用于自我介绍。
大家好，我是一段自己介绍的文字，是的，您没有猜错！我就是来凑字数的。    </span>
        <p>
                And a youth said, "Speak to us of Friendship." 
                Your friend is your needs answered. 
                He is your field which you sow with love and reap with thanksgiving. 
                And he is your board and your fireside. 
                For you come to him with your hunger, and you seek him for peace. 
                When your friend speaks his mind you fear not the "nay" in your own mind, nor do you withhold the "ay."   
         </p></p>
로그인 후 복사

为了方便观察，我们选取chrome浏览器作为实验对象。
HTML에서 글꼴 너비를 제어하는 ​​방법

添加text-align:justify;属性

 p {margin: 30px auto;width: 300px;text-align:justify;//添加的新属性}
로그인 후 복사

HTML에서 글꼴 너비를 제어하는 ​​방법

由于text-align:justity属性不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify

Chrome 브라우저에서 고정 너비 상위 요소(블록 수준 요소)에 text-align:justify 속성을 ​​설정하면 이 효과가 모든 하위 요소에 적용됩니다. 

<style>.test p{width:200px;
         border:1px solid #000;}.HTML에서 글꼴 너비를 제어하는 ​​방법 
        p{word-wrap:HTML에서 글꼴 너비를 제어하는 ​​방법;}
        .pre p{white-space:pre;}
        .pre-wrap p{white-space:pre-wrap;}
        .pre-line p{white-space:pre-line;}
        .nowrap p{white-space:nowrap;}
        </style>
        <ul class="test">
    <li class="HTML에서 글꼴 너비를 제어하는 ​​방법">
        <strong>HTML에서 글꼴 너비를 제어하는 ​​방법：</strong>
        <p>轻轻地我走了
    正如我轻轻地来</p>
    </li>
    <li class="pre">
        <strong>pre：</strong>
        <p>轻轻地我走了（这里接很多测试文字）
    正如我轻轻地来</p>
    </li>
    <li class="pre-wrap">
        <strong>pre-wrap：</strong>
        <p>轻轻地    我走了（这里接很多测试文字）
    正如我轻轻地来</p>
    </li>
    <li class="pre-line">
        <strong>pre-line</strong>
        <p>轻轻地    我走了（这里接很多测试文字）
    正如我轻轻地来</p>
    </li>
    <li class="nowrap">
        <strong>nowrap：</strong>
        <p>轻轻地我走了
    正如我轻轻地来</p>
    </li></ul>
로그인 후 복사
로그인 후 복사
span 및 p 요소 내의 텍스트는 양쪽 끝에 정렬됩니다.

Firefox 브라우저에서 고정 너비 상위 요소(블록 수준 요소)에 text-align:justify 속성을 ​​설정한 후 이 효과는 블록 수준 요소에만 영향을 미칩니다. 


<style> p.test1{width:11em; 
border:1px solid #000000;
word-break:keep-all;}
p.test2{width:11em; 
border:1px solid #000000;
word-break:break-all;}</style>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p><p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
로그인 후 복사
로그인 후 복사


p 요소 내의 텍스트만 양쪽 끝에 정렬됩니다.

핵심 코드: 
<style>.test p{border:1px solid #000;}.HTML에서 글꼴 너비를 제어하는 ​​방법 p{letter-spacing:HTML에서 글꼴 너비를 제어하는 ​​방법;}.length p{letter-spacing:10px;}</style><ul class="test">
    <li class="HTML에서 글꼴 너비를 제어하는 ​​방법">
        <strong>默认间隔</strong>
        <p>默认情况下的文字间间隔</p>
    </li>
    <li class="length">
        <strong>自定义的间隔大小</strong>
        <p>自定义的文字间隔大小Hello world</p>
    </li></ul>
로그인 후 복사
로그인 후 복사

관찰의 편의를 위해 실험 대상으로 Chrome 브라우저를 선택했습니다.

여기에 사진 설명 쓰기추가< code>text-align:justify;속성rrreee2.word-spacing 이 속성은 요소의 단어 사이에 삽입되는 공백의 양을 정의합니다. 이 속성의 경우 "단어"는 공백으로 둘러싸인 문자열로 정의됩니다. 길이 값으로 지정하면 단어 사이의 일반적인 간격이 조정됩니다. 따라서 Normal은 0으로 설정하는 것과 같습니다. 값 및 설명Description
여기에 그림 설명을 쓰세요 text-align:justity 속성은 강제 중단 라인을 처리하지 않으며, 블록 내의 마지막 라인도 처리하지 않습니다. , 블록에 텍스트 줄이 하나만 있는 경우(이 줄은 첫 번째 줄이자 마지막 줄입니다) 이때 text-align:justify를 설정하는 것만으로는 줄의 양쪽 끝을 정렬할 수 없습니다. 따라서 이 속성은 문자 글꼴을 변경하는 데 유용합니다. 너비는 최소한의 역할을 합니다.
word-spacing 속성은 단어 사이의 간격(예: 단어 간격)을 늘리거나 줄입니다.
음수 길이 값을 지정하면 단어가 더 가깝게 압축됩니다.
값
🎜🎜🎜🎜HTML에서 글꼴 너비를 제어하는 ​​방법🎜🎜기본값. 단어 사이의 표준 간격을 정의합니다. 🎜🎜🎜🎜length🎜🎜는 단어 사이의 고정된 공백을 정의합니다. 🎜🎜🎜🎜inherit🎜🎜은 단어 간격 속성의 값이 상위 요소🎜🎜🎜🎜에서 상속되어야 함을 지정합니다.

注意：
word-spacing属性只对拼音文字起作用，并且对象形文字不起作用。
HTML에서 글꼴 너비를 제어하는 ​​방법

3.white-space

white-space 属性设置如何处理元素内的空白。

取值与描述

值描述
HTML에서 글꼴 너비를 제어하는 ​​방법默认。空白会被浏览器忽略。
pre用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。
nowrap强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
pre-wrap用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

核心代码

<style>.test p{width:200px;
         border:1px solid #000;}.HTML에서 글꼴 너비를 제어하는 ​​방법 
        p{word-wrap:HTML에서 글꼴 너비를 제어하는 ​​방법;}
        .pre p{white-space:pre;}
        .pre-wrap p{white-space:pre-wrap;}
        .pre-line p{white-space:pre-line;}
        .nowrap p{white-space:nowrap;}
        </style>
        <ul class="test">
    <li class="HTML에서 글꼴 너비를 제어하는 ​​방법">
        <strong>HTML에서 글꼴 너비를 제어하는 ​​방법：</strong>
        <p>轻轻地我走了
    正如我轻轻地来</p>
    </li>
    <li class="pre">
        <strong>pre：</strong>
        <p>轻轻地我走了（这里接很多测试文字）
    正如我轻轻地来</p>
    </li>
    <li class="pre-wrap">
        <strong>pre-wrap：</strong>
        <p>轻轻地    我走了（这里接很多测试文字）
    正如我轻轻地来</p>
    </li>
    <li class="pre-line">
        <strong>pre-line</strong>
        <p>轻轻地    我走了（这里接很多测试文字）
    正如我轻轻地来</p>
    </li>
    <li class="nowrap">
        <strong>nowrap：</strong>
        <p>轻轻地我走了
    正如我轻轻地来</p>
    </li></ul>
로그인 후 복사
로그인 후 복사

HTML에서 글꼴 너비를 제어하는 ​​방법

当元素属性为white-space:nowrap;且字符字体的个数足够多时，就可以改变字符字体的宽度。

4.word-break

word-break 属性规定自动换行的处理方法。

取值与描述

值描述
HTML에서 글꼴 너비를 제어하는 ​​방법使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

核心代码

<style> p.test1{width:11em; 
border:1px solid #000000;
word-break:keep-all;}
p.test2{width:11em; 
border:1px solid #000000;
word-break:break-all;}</style>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p><p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
로그인 후 복사
로그인 후 복사

HTML에서 글꼴 너비를 제어하는 ​​방법

通过设置word-break:keep-all;属性，有可能会改变了字体字符的宽度。

5.letter-spacing
前面的四种属性要么是投机取巧，要么是难以控制宽度。其实真正能够控制宽度的属性只有一个，那就是letter-spacing属性。

letter-spacing 属性增加或减少字符间的空白（字符间距）。

取值与描述

值描述
HTML에서 글꼴 너비를 제어하는 ​​방법默认。规定字符间没有额外的空间。
length定义字符间的固定空间（允许使用负值）。
inherit规定应该从父元素继承 letter-spacing 属性的值。

核心代码

<style>.test p{border:1px solid #000;}.HTML에서 글꼴 너비를 제어하는 ​​방법 p{letter-spacing:HTML에서 글꼴 너비를 제어하는 ​​방법;}.length p{letter-spacing:10px;}</style><ul class="test">
    <li class="HTML에서 글꼴 너비를 제어하는 ​​방법">
        <strong>默认间隔</strong>
        <p>默认情况下的文字间间隔</p>
    </li>
    <li class="length">
        <strong>自定义的间隔大小</strong>
        <p>自定义的文字间隔大小Hello world</p>
    </li></ul>
로그인 후 복사
로그인 후 복사

HTML에서 글꼴 너비를 제어하는 ​​방법


위 내용은 HTML에서 글꼴 너비를 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html 字体
원천：php.cn
이전 기사：CSS의 플렉스박스 소개 다음 기사：진행률 표시줄이 로드된 후 페이지를 표시하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿