«css» 태그된 질문

문제 배경 : katex를 사용하여 페이지에 수학을 렌더링하고 있습니다. 그런 다음 해당 페이지의 일부 버전의 PDF 버전을 만들고 싶습니다. 따라서 모든 CSS를 인라인하여 렌더러에 전달하는 내보낼 부분이 포함 된 HTML 문서를 만듭니다. 렌더러는 노드 리소스에 액세스 할 수 없으므로 모든 것이 인라인됩니다. 글꼴을 제외하고는 완벽하게 작동합니다. url-loader와 bas64-inline-loader를 모두 시도했지만 …

10 javascript  css  webpack  data-uri 

Chrome v78.0.3904.70이 출시 된 이후  CSS 속성 사용에 문제가 있습니다 white-space: nowrap;. 끊김없는 공간은 줄 바꿈을 일으키는 것으로 보입니다. 를 사용 text-overflow: ellipsis하면 실제 텍스트가 컨테이너 외부에서 분리되어 표시되지 않습니다. 텍스트가 너무 길어서 표시되지 않는 경우에만 발생합니다. .box-inline { max-width: 120px; overflow: hidden; height: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: …

10 html  css  google-chrome  whitespace 

내 코드의 작은 조각을 따르십시오. 왜 "아이폰"셀이 아이폰에서만 깜빡 거리는지 알고 싶을뿐입니다. 추신. 구조에 테이블이나 목록을 사용할 수 없습니다. 나는 또한 사용하려고했다 transform: translate3d(0,0,0);. 기본적으로 iPhone 및 iPad에서 Left 및 Top에 대해 첫 번째 셀이 고정되어 있어야합니다. HTML 및 CSS 만 사용 하여이 작업을 수행하고 싶습니다. 중대한 고정 솔루션으로 대답 …

10 html  css 

구매할 때 주문 세부 정보를 전송하는 전자 상거래 앱이 있으며 해당 이메일 템플릿을 다시 디자인했습니다. 지난 며칠 동안 일부 고객의 이메일에 절반의 텍스트가 누락되었다는보고가 접수되었습니다. 마지막으로 스크린 샷을 얻은 후 어두운 모드를 사용하는 iPhone에서 문제가 발생한다는 것을 알게되었습니다. 지금까지 그들은 Mail 앱이나 Safari에서 Gmail을 사용하는 고객이었습니다 (둘 다 동일한 문제가 …

10 ios  css  email  gmail  ios-darkmode 

그동안 <meta name="viewport">태그 표준화가, 그것은 "이 때문에 사실상의 지배에 대부분의 모바일 브라우저에서 존경합니다." 실제 웹 표준이 아닌 단점 중 하나는 자세한 문서가 다른 표준만큼 유용하지 않다는 것입니다. CSS 워킹 그룹은 그게 내가 주로 권위있는 작품으로 사용하고 무엇 때문에, 이것에 대한 사양을 가지고있다. 내 주요 질문은 다음과 같습니다 다음 선언들 사이에 …

9 css  viewport  meta-tags  meta 

다른 요소가 몇 개 들어있는 컨테이너 요소가 있지만 화면 크기에 따라 일부 부분이 설명 할 수 없을 정도로 잘립니다. HTML 페이지의 너비를 조정하고 클릭하면 드래그하여 코드 샌드 박스 링크에서 동작을 관찰 할 수 있습니다. 기본 컨테이너 테두리 만 렌더링되고 하위 요소가 영향을받지 않도록하려면 어떻게해야합니까? https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import …

9 javascript  css  reactjs 

선택한 div를 확장하고 나머지 공간에 맞게 동일하게 확장하여 다른 div를 적절하게 작동시킬 수있는 스크립트 (여기서는 사용자의 도움으로)를 코딩했습니다 (너비가 고정 된 첫 번째 제외). 그리고 여기 내가 달성하고자하는 그림이 있습니다. 이를 위해 플렉스와 전환을 사용합니다. 잘 작동하지만 jQuery 스크립트는 "400 %"스트레치 값을 지정합니다 (테스트에 적합 함). 이제 선택한 div를 "400 …

9 javascript  jquery  css  flexbox  css-transitions 

HTML과 CSS만으로 시각적으로 역동적이고 인터랙티브 한 경험을 만들도록 스스로에게 도전했습니다 (자바 스크립트 없음). 지금까지 순수 CSS 및 HTML에서 할 수 없었던 기능을 찾지 못했습니다. 이것은 아마도 조금 더 어려울 것입니다. 나는 두 번 클릭에서 사용자 방지하기 위해 필요 <a>, <input type="submit">그리고 <button>태그를. 이는 양식을 이중 제출하거나 실수로 URL에 2 개의 …

9 html  css 

다음과 같은 사양으로 다양한 크기의 이미지와 비율의 이미지 갤러리 표시 : 이미지 사이에 공백 (여백)이 없습니다. 원래 비율을 최대한 존중합니다. 링크로 둘러싸인 이미지. 비 JS 솔루션. 이미지가 약간 잘릴 수 있습니다. 휴대용 솔루션. 표시되는 이미지 세트는 무작위입니다. 이미지는 왼쪽에서 오른쪽으로 표시되어야합니다 (열 사용 금지). 나는 다음 flexbox 솔루션으로 그것을 달성했다. …

9 css  flexbox  image-gallery 

Airpods Pro 페이지 에서 Apple과 동일한 효과를 애니메이션으로 만드는 래퍼를 만들었습니다 . 비디오를 조금씩 스크롤하면 기본적으로 비디오입니다. 비디오의 위치는 텍스트가 잘 스크롤되도록 고정되어 있습니다. 그러나 텍스트는 특정 구분 (텍스트 표시)의 오프셋 사이에있을 때만 표시됩니다. 그 부분은 잘 작동합니다. 이제 사용자가 비디오 끝으로 스크롤하여 애니메이션이 완료 되어 비디오 효과 래퍼가 고정 …

9 javascript  jquery  html  css 

보물지도 애니메이션을 만들었습니다. 먼저 경로가 밝은 회색으로 표시되지만 애니메이션이 시작될 때 채우기 애니메이션 ".road"가 시작될 때 밝은 회색 대시가 사라지거나 검은 색으로 바뀌고 싶습니다. 채우기 애니메이션이 해당 위치를 지나갈 때 밝은 회색 대시 ".steps"가 사라지도록 노력합니다. svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; …

9 css  svg 

3D 휠이 무한 회전하는 것을 시뮬레이션하는 12 개의 항목이있는 회전 목마를 만들어야합니다. 명확히하기 위해, 나는이 효과를 정확하게 만들어야합니다 : https://codepen.io/SitePoint/pen/yXWXaw ( 여기 에서 찾아보기 ) 그러나 이러한 추가 기능을 사용하면 (특히 데스크톱 및 모바일에서) : 슬라이드는 단계별로 스 와이프를 따라야합니다. 즉, 스 와이퍼와 같이 스 와이프하는 동안 슬라이드가 움직여야합니다. 빠르게 …

9 javascript  css  carousel  swiper 

Material UI와 테마 제공자 (JSS 사용)를 사용하는 응용 프로그램이 있습니다. 이제 fullcalendar-react를 통합하고 있습니다. 실제로는 완전한 React 라이브러리가 아니며 원래 fullcalendar 코드 주위의 얇은 React 구성 요소 래퍼입니다. 즉, 렌더링 소품과 같은 요소에 액세스하여 요소의 스타일을 지정하는 방법을 제어 할 수는 없습니다. 그러나 렌더링 할 때 호출되는 콜백 (예 : …

9 css  reactjs  fullcalendar  jss 

현재 정렬 된 열의 헤더에 아이콘이 표시되는 "정렬 가능"테이블이 있습니다. 정렬 아이콘은 텍스트 끝에 표시됩니다 (즉, LTR / RTL을 지원합니다). 현재을 사용하고 display:flex있습니다. 그러나 테이블 너비가 줄어들고 열 머리글 텍스트가 줄 바꿈되기 시작하면 어떤 열이 정렬되어 있는지 명확하지 않은 모호한 상태가됩니다. 대신 다음 요구 사항을 충족하고 싶습니다. 줄 바꿈 셀 …

9 html  css  layout  html-table  alignment 

사이드 바 / 탐색 컨텐츠 (부트 스트랩 사용)를 데스크탑에서 기본적으로 표시 (확장)하고 모바일에서 기본적으로 닫히고 모바일에서만 아이콘이 표시되도록하는 데 어려움을 겪고 있습니다. 나는 이것을 작동시키지 않는 것 같습니다. <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> …

9 javascript  html  css  bootstrap-4  responsive-design