긴 URL에 대한 더 나은 라인이 끊어집니다

CSS- 트릭은 이전에 넘쳐나는 텍스트를 처리했지만 긴 URL에 대한 포괄적 인 솔루션은 여전히 ​​거의 없습니다. Chris Coyier의 2012 년 및 2018 년 기사 ( "긴 단어 및 URL 처리"및 "Lines Break가 복잡한 곳")는 귀중한 통찰력을 제공하여 브라우저 네이티브 워드 브레이크 및 하이픈 기능을 활용하는 기술을 제안합니다.

 .dont-break-out {
  오버 플로우 랩 : 브레이크 워드;
  Word-Wrap : 브레이크 워드;
  Word-Break : Break-Word;
  하이픈 : 자동;
}

그러나 이러한 방법에는 특히 특정 스타일 가이드를 준수 할 때 제어 된 URL 브레이크에 필요한 정밀도가 부족합니다.

URL 라인의 중요성이 깨집니다

미적 고려 사항을 제외하고 일관된 URL 형식은 중요합니다. 시카고 스타일 매뉴얼 과 같은 스타일 가이드는 URL 브레이크에 대한 지침을 제공하지만 디지털 형식에 대한 비난을 제공합니다. 그러나 인쇄 출판물, PDF, 온라인 이력서 또는 시각적 일관성 수요 유지 URL 라인 브레이크에 대한 정확한 제어와 같은 시나리오.

전략적 URL 브레이크 배치

가독성이 가장 중요합니다. 시카고 스타일에 따라 브레이크는 문장 부호와 일치해야합니다.

• 결장 또는 이중 슬래시 후 ( // )
• 단일 슬래시 ( / ), tilde ( ~ ), 기간 ( . ), comma ( , ), 하이픈 ( - ), 밑줄 ( _ ), 물음표 ( ? ), 번호 부호 ( # ) 또는 백분율 기호 ( % ) 전에
• 평등 표시 ( = ) 또는 앰퍼 샌드 ( & ) 전후

인공 하이픈 소개를 피하십시오. 부드러운 하이픈은 단어 휴식에 도움이되지만 URL 내에서 잘못 해석 될 수 있습니다. 기존 구두점 지점에서 브레이크를 우선시합니다.

마스터 링 라인이 끊어집니다

요소는 솔루션을 제공합니다. 그것은 하나를 강요하지 않고 잠재적 인 라인 브레이크를 신호하며, 브라우저는 최적의 중단 점을 선택할 수 있습니다. Chris Coyier의 2012 게시물 에서이 예를 고려하십시오.

 <code>http://www.amazon.com/s/ref=sr_nr_i_o?rh=k:shark vacuum,i:garden&keywords=shark vacuum&ie=UTF8&qid=1327784979</code>

전략적으로 태그 추가 :

 http : // www. Amazon .com / s / ref = sr _ nr _ i _o? rh = k : Shark Vacuum, I : 정원 및 키워드 = 상어 진공 & IE = UTF8 & QID = 132784979

수동 삽입은 지루하고 자동화가 필요합니다. 정규 표현식을 사용한 JavaScript 기능은 다음을 자동화 할 수 있습니다.

 함수 formaturl (url) {
  varblesslash = url.split ( '//');
  var formatted = doubleslash.map (str =>
    str.replace (/(?<after> :)/giu, '$ 1')
      .바꾸다(/(?<before> [/~ ., \ -_?#%UNCLED)/GIU, '$ 1')
      .바꾸다(/(?<beforeandafter> [= &])/giu, '$ 1')
    ).가입하다('// ');
  반환 형식;
}</beforeandafter></before></after>

구현 및 브라우저 지원

라이브 데모는이 접근법의 효과를 보여줍니다. 정적 사이트 생성기와의 통합은 프로세스를 더 간소화합니다. 구형 IE 버전에서는 주로 예외를 제외하고 광범위한 브라우저 지원을 즐깁니다. 의사 요소를 사용하는 CSS 해결 방법과 제로 폭 이상 공간은 호환성을 향상시킵니다.

 WBR : 전 {
  내용 : "\ 200b";
  흰색 공간 : 정상;
}

잘 구성된 URL의 우선 순위를 지정하면 설계 스타일 또는 대상 매체에 관계없이 사용자 경험이 향상됩니다.

참조

• 앤드류, 레이첼. 2015.“CSS로 인쇄 용 디자인.” Smashing Magazine , 1 월 7 일. https://www.php.cn/link/68e4593563e1b425a7717504bca103d6
• 앤드류, 레이첼. 2018.“2018 년 인쇄 스타일 상태에 대한 가이드.” Smashing Magazine , 5 월 1 일. https://www.php.cn/link/d8001036d6702e430b8e092484444ee1
• Coyier, Chris. 2012. CSS- 트릭 , 2012 년 1 월 30 일. 마지막 수정 2018 년 7 월 25 일. https://www.php.cn/link/f4d1f9e7d8c4235ad5d48b2f213cc38
• Coyier, Chris. 2018.“라인이 깨지는 곳은 복잡합니다. 여기에 모든 관련 CSS와 HTML이 있습니다.” CSS-Tricks , 2018 년 5 월 9 일. 마지막 수정 2020 년 4 월 24 일. https://www.php.cn/link/a18d17349a19926e1944714f747d330d
• 시카고 스타일 매뉴얼 . 2017. 17th ed. 시카고 : 시카고 대학교 출판부. https://www.php.cn/link/2e3a567dcc390811e4dfa8d478e4a149
• 왕자. nd "CSS로 HTML을 PDF로 변환하십시오." 2021 년 2 월 25 일 액세스. https://www.php.cn/link/13d8efdc6a5cb721fe7031be062b9b74
• 유니 코드 컨소시엄. 2009.“특별 영역과 형식 문자.” 유니 코드 표준 에서. 버전 5.2.0. https://www.php.cn/link/99407a87A3333E79517280E0FDACDAA713
• Whatwg. ND“HTML : 살아있는 표준.” 2021 년 2 월 25 일 액세스. https://www.php.cn/link/767d3dd25ed652d33fa7743c0c2400fa

위 내용은 긴 URL에 대한 더 나은 라인이 끊어집니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!