font-size와div의width는 직접 연결되지 않기 때문에 애니메이션 시 주의해야 할marquee 버전
총결산
translate는 요소이기 때문에 요소의 구조(틀 모델)가 중요하다.
font-size가 커지면 문자가 아버지width보다 커서 표관 문자의 길이와 아버지width에 차이가 생길 수 있습니다.
그 결과 때때로 예상치 못한 애니메이션 결과가 나타날 수 있다
문자의 길이는width와 같은 것이 좋습니다.
반대로 문자보다 충분한 width를 확보하더라도 예상 이상의 변화량이 있기 때문에 쓸데없는 것이 아니다.
(font-size와div에서 넘쳐나는 것은 근미즈에게 직접적인 원인은 아니지만 기본 글꼴 크기에서 너무 긴 시간과 내가 겪은 상황의 제목을 입력하지 않습니다)
아이구
어떤 곳에는 줄을 바꾸고 싶지 않은 텍스트가 있다.
지금 화면 안에 있습니다white-space: nowrap;.
하지만 표준 글꼴 사이즈라면 작아서 확대하고 싶어요.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
아이고, 화면에서 튀어나와서 뒷부분이 안 보여.
줄을 바꾸고 싶지 않고 가로로 굴러도 길어서 보기 싫다.
여기에 오래된 marquee 탭으로 텍스트를 스크롤하고 싶습니다.
그러나 marquee 는 이미 폐지되었기 때문에 CSS의 애니메이션으로 재현한다.
찾아보니transform: translate(0);의 초기 상태입니다.거기서transform: translate(-100%);에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
.anime {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: marquee;
}
@keyframes marquee {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big">
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big anime">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
스크롤하지만 애니메이션은 미터당 끝납니다.
마지막 애니메이션이 아닙니다.
개발자 도구에서 본 결과 애니메이션은 div의 상자 모형에서 작업하는 것 같았고 문자는 그 상자를 뛰어넘었다.
애니메이션이 끝날 때 직사각형 모델의 변화는 -100%로 표시됩니다.
하지만 문자는width 이상이어서 중단됩니다.
해결 방법
여기서 div 을 width: 100% 로 설정하면 해결할 수 없을 것 같습니다.100%는 부모님에 비해 사이즈가 크고, 부모님도 크셔도 창 사이즈와 차이가 많지 않죠.
가볍게 보는 느낌으로 보면 간단한 해소법은 두 가지가 있다.
display 속성 변경
display: inline-blockwidth를 조정할 수 있습니다.inline 이번 애니메이션은 효과가 없다. 공존하려면 여기 있다.
너비 속성 변경
width: max-content 또는width: min-contentwidth를 내부 원소의 크기에 자동으로 맞출 수 있습니다.
이것도 font-size의 변경에 대응했다.
약간의 새로운 값입니다. CSS3로 초안 단계처럼?하지만 현대 브라우저라면 OK.<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
.anime {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: marquee;
}
@keyframes marquee {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
.display {
display: inline-block;
}
.content {
width: max-content;
}
</style>
</head>
<body>
<div class="big anime display">
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big anime content">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
따라서 큰 문자를 스크롤할 수 있습니다.
font-size 블록 요소에서 넘치는 원리를 이해하지 못하기 때문에 귀신문일 수 있다.
Reference
이 문제에 관하여(font-size와div의width는 직접 연결되지 않기 때문에 애니메이션 시 주의해야 할marquee 버전), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/khsk/items/b2d64280cf9fe5bd6553
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
어떤 곳에는 줄을 바꾸고 싶지 않은 텍스트가 있다.
지금 화면 안에 있습니다
white-space: nowrap;. 하지만 표준 글꼴 사이즈라면 작아서 확대하고 싶어요.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
줄을 바꾸고 싶지 않고 가로로 굴러도 길어서 보기 싫다.
여기에 오래된
marquee 탭으로 텍스트를 스크롤하고 싶습니다.그러나
marquee 는 이미 폐지되었기 때문에 CSS의 애니메이션으로 재현한다.찾아보니
transform: translate(0);의 초기 상태입니다.거기서transform: translate(-100%);에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
.anime {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: marquee;
}
@keyframes marquee {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big">
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big anime">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
스크롤하지만 애니메이션은 미터당 끝납니다.
마지막 애니메이션이 아닙니다.
개발자 도구에서 본 결과 애니메이션은
div의 상자 모형에서 작업하는 것 같았고 문자는 그 상자를 뛰어넘었다. 애니메이션이 끝날 때 직사각형 모델의 변화는 -100%로 표시됩니다.
하지만 문자는width 이상이어서 중단됩니다.
해결 방법
여기서 div 을 width: 100% 로 설정하면 해결할 수 없을 것 같습니다.100%는 부모님에 비해 사이즈가 크고, 부모님도 크셔도 창 사이즈와 차이가 많지 않죠.
가볍게 보는 느낌으로 보면 간단한 해소법은 두 가지가 있다.
display 속성 변경
display: inline-blockwidth를 조정할 수 있습니다.inline 이번 애니메이션은 효과가 없다. 공존하려면 여기 있다.
너비 속성 변경
width: max-content 또는width: min-contentwidth를 내부 원소의 크기에 자동으로 맞출 수 있습니다.
이것도 font-size의 변경에 대응했다.
약간의 새로운 값입니다. CSS3로 초안 단계처럼?하지만 현대 브라우저라면 OK.<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
.anime {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: marquee;
}
@keyframes marquee {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
.display {
display: inline-block;
}
.content {
width: max-content;
}
</style>
</head>
<body>
<div class="big anime display">
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big anime content">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
따라서 큰 문자를 스크롤할 수 있습니다.
font-size 블록 요소에서 넘치는 원리를 이해하지 못하기 때문에 귀신문일 수 있다.
Reference
이 문제에 관하여(font-size와div의width는 직접 연결되지 않기 때문에 애니메이션 시 주의해야 할marquee 버전), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/khsk/items/b2d64280cf9fe5bd6553
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow: hidden;
}
div {
white-space: nowrap;
}
.big {
font-size: 256px;
}
.anime {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: marquee;
}
@keyframes marquee {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
.display {
display: inline-block;
}
.content {
width: max-content;
}
</style>
</head>
<body>
<div class="big anime display">
abcdefghijklmnopqrstuvwxyz
</div>
<div class="big anime content">
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
Reference
이 문제에 관하여(font-size와div의width는 직접 연결되지 않기 때문에 애니메이션 시 주의해야 할marquee 버전), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/khsk/items/b2d64280cf9fe5bd6553텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
