동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

source

동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

manycodes 2023. 8. 19. 10:29

동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

Javascript로 이 문제가 상당히 쉽게 해결될 수 있다는 것을 알고 있지만, 저는 순수한 CSS 솔루션에만 관심이 있습니다.

항상 고정된 div에 맞도록 텍스트 크기를 동적으로 조정하는 방법을 원합니다.다음은 마크업 샘플입니다.

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

컨테이너의 너비를 ems로 지정하고 글꼴 크기를 지정하여 그 값을 상속받으면 가능할까 생각하고 있었습니다.

참고: 이 솔루션은 콘텐츠 양이 아닌 뷰포트 크기에 따라 변경됩니다.

저는 VW 유닛을 사용하여 이것이 가능하다는 것을 방금 알았습니다.뷰포트 너비 설정과 관련된 단위입니다.기존 브라우저 지원 부족과 같은 몇 가지 단점이 있지만, 이는 분명히 사용을 심각하게 고려해야 할 사항입니다.또한 다음과 같이 이전 브라우저에 대한 예비 기능을 제공할 수 있습니다.

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ 및 https://medium.com/design-ux/66bddb327bb1

편집 : css의 calc()와 관련된 트뤼를 주의하세요.당신은 미래에 그것을 성취할 수 있을지도 모릅니다.

안타깝게도 현재로서는 CSS만의 해결책이 없습니다.이것이 제가 당신에게 제안하는 것입니다.요소에 제목 속성을 지정합니다.그리고 텍스트 오버플로 줄임표를 사용하여 디자인이 손상되는 것을 방지하고 사용자에게 더 많은 텍스트가 있음을 알려줍니다.

<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
 Some sample dynamic amount of text here
</div>

또는 뷰포트를 기준으로 크기를 줄이려는 경우.CSS3은 뷰 포트와 관련된 새로운 차원을 지원합니다.

body {
   font-size: 3.2vw;
}

3.2vw = 뷰포트 폭의 3.2%
3.2vh = 뷰포트 높이의 3.2%
3.2vmin = 3.2vw 또는 3.2vh 중 작은 크기
3.2ppm = 3.2vw 또는 3.2vh 중 더 큰 값은 css-tricks.com/ 을 참조하십시오. 또한 caniuse.com/ 을 참조하십시오.

은 당은아마관것다입니있을에 관심이 도 모릅니다.calc접근:

font-size: calc(4vw + 4vh + 2vmin);

됐어요. 당신의 취향에 맞게 가치를 조정하세요.

출처: https://codepen.io/CrocoDillon/pen/fBJxu

화면 크기에 따라 너비를 다르게 설정하는 것이 유일한 방법일 수 있지만, 이 방법은 매우 부정확하므로 Js 솔루션을 사용해야 합니다.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

이 방정식을 사용합니다.

1440 및 768보다 크거나 작은 경우 정적 값을 지정하거나 동일한 방법을 적용할 수 있습니다.

vw 솔루션의 단점은 화면 해상도 1440에서 5vw가 사용자의 아이디어 글꼴 크기인 60px 글꼴 크기가 될 수 있지만 창 너비를 768로 줄이면 원하는 최소 크기가 아닌 12px가 될 수 있다는 것입니다.이 방법을 사용하면 상한과 하한을 설정할 수 있습니다. 그러면 글꼴이 그 사이에서 자동으로 축척됩니다.

참고로 비CSS 솔루션은 다음과 같습니다.

아래는 컨테이너 내 텍스트 길이에 따라 글꼴 크기를 조정하는 일부 JS입니다.

코드가 약간 수정되었지만 아래와 같은 생각을 가진 코드펜:

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // Reset font-size to 100% to begin
    container.style.fontSize = "100%";

    // Check if the text is wider than its container,
    // if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

저는 사용자가 드롭다운에서 선택한 다음 메뉴의 div가 채워질 때 이 기능을 호출합니다(여기서 동적 텍스트가 발생함).

    scaleFontSize("my_container_div");

또한 CSS 생략 부호("...")를 사용하여 다음과 같이 더 긴 텍스트를 자릅니다.

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

그래서 궁극적으로:

짧은 텍스트: 예: "APPLES"

완전하게 렌더링되고 멋진 큰 글자들.
긴 텍스트: 예: "애플 & 오렌지"

위의 JS 스케일링 기능을 통해 70% 축소됩니다.
초장문: 예: "APPLES & ORANGE & BANAN..."

CSS 규칙과 함께 위의 JS 스케일링 함수를 통해 70% 축소되고 "..." 타원으로 잘립니다.

또한 같은 글꼴 크기를 유지하면서 텍스트를 좁게 만들기 위해 CSS 문자 간격으로 재생하는 방법을 탐색할 수 있습니다.

많은 사람들이 @DMTinter의 게시물에 언급했듯이 OP는 캐릭터의 수("금액")에 대해 질문하고 있었습니다.그는 또한 CSS에 대해 묻고 있었지만, @Alexander가 지적했듯이, "CSS만으로는 가능하지 않습니다." 제가 알기로는, 그것은 현재로서는 사실인 것 같습니다. 그래서 사람들이 다음으로 좋은 것을 알고 싶어할 것이라는 것도 논리적으로 보입니다.

저는 이것이 특별히 자랑스럽지는 않지만, 효과가 있습니다.그것을 달성하기에는 과도한 양의 코드인 것 같습니다.이것이 핵심입니다.

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

여기 JS Bin이 있습니다: http://jsbin.com/pidavon/edit?html,css,js,console,output
그것에 대한 가능한 개선점을 제시해 주십시오. (저는 텍스트를 측정하는 데 캔버스를 사용하는 것에 별로 관심이 없습니다...가 것 . 버헤드너(?) 무많은것같다습니오가?)같다▁seems것니습오(많.

@Pete for measure 덕분입니다.텍스트 기능: https://stackoverflow.com/a/4032497/442665

저는 이 동적 글꼴 크기 calc()를 BootStrap 어딘가에서 구해서 그것에 맞게 수정했습니다.Webflow 프로젝트를 위해 4pt 시스템 및 rem https://www.finsweet.com/client-first/docs/sizes 을 기반으로 합니다.

html {font-size: 16px;}

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {font-family: 'Poppins', sans-serif;}

/*---SETUP BASE SIZE ---*/
html {font-size: 16px;}

/*---LINE-HEIGHTS + MARGINS---*/
[class^="display"], h1, h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.display-1, .display-2, .display-3, .display-4 {
    line-height: 1.2;
    
}

h1, h2, h3, h4 {
    line-height: 1.4;
}

p, ul, ol {
    margin-bottom: 0.7rem;
    line-height: 1.45;
}

.lead {
    margin-bottom: 1rem;
    line-height: 1.4;
}

/*---FONT SIZES 1279px DOWN---*/
@media (max-width: 1279px) {
    .display-1 {
        font-size: calc(1.625rem + 4.5vw);
    }

    .display-2 {
        font-size: calc(1.575rem + 3.9vw);
    }

    .display-3 {
        font-size: calc(1.525rem + 3.3vw);
    }

    .display-4 {
        font-size: calc(1.475rem + 2.7vw);
    }
  
    /*---HEADINGS---*/
    h1 {
        font-size: calc(1.375rem + 1.5vw);
    }

    h2 {
        font-size: calc(1.325rem + 0.9vw);
    }

    h3 {
        font-size: calc(1.3rem + 0.6vw);
    }

    h4 {
        font-size: calc(1.275rem + 0.3vw);
    }

    /*---PARAGRAPHS/UL/OL---*/
    p, ul, ol  {
        font-size: calc(0.823rem + 0.3vw);
    }

    .lead {
        font-size: calc(1.01rem + 0.3vw);
    }
}

/*---FONT SIZES ABOVE 1279px---*/
@media screen and (min-width: 1280px) {
    .display-1 {
        font-size: 5.22rem;
    }

    .display-2 {
        font-size: 4.7rem;
    }

    .display-3 {
        font-size: 4.16rem;
    }

    .display-4 {
        font-size: 3.63rem;
    }
    /*---HEADINGS---*/
    h1 {
        font-size: 2.58rem;
    }

    h2 {
        font-size: 2.05rem;
    }

    h3 {
        font-size: 1.78rem;
    }

    h4 {
        font-size: 1.52rem;
    }

    p, ul, ol {
        font-size: 1.0625rem;
    }

    .lead {
        font-size: 1.25rem;
    }
}

<section>
    <div class="container">
        <p style="color:#8C8C8C;"><i>Note: Resize window too see text grow/shrink in browser window <= 1279px</i></p>
        <br>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <br>
        <br>
        <br>
        <br>
        <h1>h1. The quick brown fox jumps over the lazy dog</h1>
        <h2>h2. The quick brown fox jumps over the lazy dog</h2>
        <h3>h3. The quick brown fox jumps over the lazy dog</h3>
        <h4>h4. The quick brown fox jumps over the lazy dog</h4>
        <p>The earliest known appearance of the phrase was in The Boston Journal. In an article titled "Current Notes" in the February 9, 1885, edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[2] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The"</p>
        <p>The earliest known use of the phrase starting with "The" is from the 1888 book Illustrative Shorthand by Linda Bronson.[4] The modern form (starting with "The") became more common even though it is slightly longer than the original (starting with "A").</p>
        <p>A 1908 edition of the Los Angeles Herald Sunday Magazine records that when the New York Herald was equipping an office with typewriters "a few years ago", staff found that the common practice sentence of "now is the time for all good men to come to the aid of the party" did not familiarize typists with the entire alphabet, and ran onto two lines in a newspaper column. They write that a staff member named Arthur F. Curtis invented the "quick brown fox" pangram to address this.</p>
        <br>
        <br>
        <br>
        <br>
        <p class="lead">Lead paragraph: As the use of typewriters grew in the late 19th century.</p>
        <p>The phrase began appearing in typing lesson books as a practice sentence. Early examples include How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890),[6] and Typewriting Instructor and Stenographer's Hand-book (1892). By the turn of the 20th century, the phrase had become widely known. In the January 10, 1903, issue of Pitman's Phonetic Journal, it is referred to as "the well known memorized typing line embracing all the letters of the alphabet".</p>
        <p>Robert Baden-Powell's book Scouting for Boys (1908) uses the phrase as a practice sentence for signaling.</p>
        <p>The first message sent on the Moscow–Washington hotline on August 30, 1963, was the test phrase "THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG'S BACK 1234567890".</p>
        <br>
        <br>
        <br>
        <br>
        <ul class="list-unordered">
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
        </ul>
        <br>
        <br>
        <br>
        <br>
        <ol class="list-ordered">
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
        </ol>
        <br>
        <br>
        <br>
        <br>
    </div>
</section>

즐거운 시간 되세요.

이 솔루션은 다음과 같은 도움이 될 수도 있습니다.

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

저한테는 잘 맞았습니다!

좋아요, 당신의 역동적인 문자는 어딘가에서 온 것이 틀림없습니다.제 경우에는 다음과 같습니다.

<div class="large" :data-contentlength="Math.floor(item.name.length/7)">[[ item.name ]]</div>

그리고 나의 css 수업:

.large[data-contentlength="1"]{ font-size: 1.2em; }
.large[data-contentlength="2"]{ font-size: 1.1em; }
.large[data-contentlength="3"]{ font-size: 1.0em; }
.large[data-contentlength="4"]{ font-size: 0.9em; }
.large[data-contentlength="5"]{ font-size: 0.8em; }
.large[data-contentlength="6"]{ font-size: 0.7em; }
.large[data-contentlength="7"]{ font-size: 0.6em; }

또한 "크지 않은" 텍스트에 대한 수업도 있습니다.

[data-length="1"]{ font-size: 1.00em; }
...

편집: 모든 브라우저에서 특성을 사용할 수 있으면 이 작업이 조금 쉬워집니다. https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility

또한 CSS가 2개의 단위 값(예: px와 ch)을 나눌 수 있다면 이것은 더 동적일 수 있습니다. 지금은 수동으로 해야 하기 때문입니다.

여기 참조:

https://jsfiddle.net/qns0pov2/3/

1ch 큐브를 만들고 대상 단위(px 중간)에서 큐브가 얼마나 큰지 확인한 후 행당 문자 수를 계산하고 이 값을 사용하여 각 콘텐츠 길이에 대한 완벽한 글꼴 크기를 얻습니다.

피들은 또한 그 접근법의 문제를 보여줍니다: 평균 문자 폭은 다음보다 작습니다.1ch(이를 기반으로 함)0) 하지만 다음과 같은 캐릭터가 있습니다.M이들은 더 큽니다(약 70%).

따라서 문자가 공간에 맞도록 하려면 다음과 같이 피들을 조정합니다.--ch-width: calc(8.109 * 1.7);

일반적인 경우에 더 관심이 있는 경우:--ch-width: calc(8.109 * 0.92);

부트스트랩 4에서 처음부터 하는 경우

https://bootstrap.build/app으로 이동합니다.
검색 모드 클릭
검색:$enable-responsive-font-sizes그리고 그것을 켭니다.
테마 내보내기를 클릭하여 사용자 지정 부트스트랩 CSS 파일을 저장합니다.

문자 수에 따라 서버 측에서 클래스를 설정하는 것은 어떻습니까?

    .NotMuchText {
        font-size: 20px;
    }

    .LotsOfText {
        font-size: 10px;
    }

저는 또한 자바스크립트가 아닌 솔루션인 CSS 솔루션을 원했고 대신 PHP/CSS 솔루션에 의존했습니다.

내부 문자열의 길이를 기준으로 글꼴 크기를 계산하는 룩업 테이블을 만듭니다.<div>.

const fontSizeLookupTable = () => {
  // lookup table looks like: [ '72px', ..., '32px', ..., '16px', ..., ]
  let a = [];
  // adjust this based on how many characters you expect in your <div>
  a.length = 32;
  // adjust the following ranges empirically
  a.fill( '72px' ,     );
  a.fill( '32px' , 4 , );
  a.fill( '16px' , 8 , );
  // add more ranges as necessary
  return a;
}

const computeFontSize = stringLength => {
  const table = fontSizeLookupTable();
  return stringLength < table.length ? table[stringLength] : '16px';
}

경험적 검정을 통해 모든 모수를 조정하고 조정합니다.

나는 smth를 다음과 같이 사용했습니다.

1.style.fontSize = 15.6/(document.getElementById("2").innerHTML.length)+ 'vw'

위치: 1 - 부모 div Id 및 2 - 내 텍스트가 있는 div의 Id

언급URL : https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters

'source' 카테고리의 다른 글

Python 하위 프로세스."OSError: [Errno 12] 메모리를 할당할 수 없습니다"를 엽니다. (0)	2023.08.19
jQuery: 텍스트 상자에 "숫자"만 입력하는 것을 제한하는 가장 좋은 방법은 무엇입니까?(소수점 허용) (0)	2023.08.19
*ngIf와 [hidden]의 차이점은 무엇입니까? (0)	2023.08.19
jquery: $(추가).상단()은 스크롤하지만 $(창)는 스크롤하지 않습니다.맨 아래로 스크롤() (0)	2023.08.14
Javascript에서 여러 개의 공백을 모두 제거하고 단일 공백으로 대체합니다. (0)	2023.08.14

현재글동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

각종 프로그래밍 정보를 다루는 블로그입니다.

Wordpress, Oracle, angular, ASP.NET, JavaScript, WPF, C, Excel, Git, php, spring-boot, angularJS, jQuery, Python, JSON, mariadb, Java, MySQL, reactjs, MongoDB,

Today :
Yesterday :

manycodes

동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

동적인 문자 양에 따라 글꼴 크기를 반응시키는 순수 CSS

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바