javascript+css로 영어 단어 분할을 구현하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

javascript+css로 영어 단어 분할을 구현하는 방법

PHPz

Apr 26, 2023 am 10:33 AM

웹 개발을 하다 보면 내용이 너무 길어서 한 줄로 다 표시할 수 없는 상황이 자주 발생하는데, 이때 이 문제를 해결하려면 하이픈 기술을 사용해야 합니다. 단어 분리는 현재 줄 너비에 맞추기 위해 적절한 위치에서 단어를 분할하여 단어 오버플로나 보기 흉한 텍스트 레이아웃을 방지하는 것을 의미합니다. 영어에서 하이픈은 일반적으로 단어 분리기를 나타내는 데 사용되며 이를 영어 하이픈이라고 합니다.

이 기사에서는 JavaScript와 CSS를 사용하여 영어 단어 분할을 구현하는 두 가지 방법을 소개하고 두 가지 방법의 장점, 단점 및 적용 가능한 시나리오에 대해 논의합니다.

1. CSS에서 Hyphens 속성을 사용하세요

css3에서는 단어 분할 방식을 제어하기 위해 새로운 Hyphens 속성이 추가되었습니다. Hyphens 속성은 세 가지 값을 허용합니다.

none: 단어 분할이 없음을 의미합니다.
manual: 단어 분할 위치를 수동으로 지정함을 의미합니다.
auto: 자동 인식 및 단어 분할을 의미합니다.

기본적으로 Hyphens 속성은 없음입니다. 단어 분할은 자동 또는 수동이 지정된 경우에만 적용됩니다. 여기서는 Hyphens 속성의 auto 값에 중점을 둘 것입니다.

하이픈 속성을 자동으로 설정하면 브라우저는 적절한 위치에서 자동으로 단어 분할을 수행합니다. 그러나 이 속성은 현재 일부 브라우저에서만 지원되며, 브라우저마다 다르게 구현됩니다.

구체적으로 Safari 기반 브라우저(예: Safari 및 Chrome)는 Hyphens 속성을 비교적 포괄적으로 지원하지만, 글꼴에 해당 언어(lang) 속성을 설정하고 html에서 텍스트의 언어 속성을 지정해야 합니다. 정상적인 일. Edge 및 Firefox와 같은 브라우저는 이 속성을 약하게 지원합니다.

다음은 CSS 코드 예입니다.

p {
    font-size: 16px;
    -webkit-hyphens: auto; /* Safari内核浏览器 */
    -ms-hyphens: auto; /* Edge浏览器 */
    hyphens: auto;
}

로그인 후 복사

2. javascript를 사용하여 영어 단어 분할 구현

javascript를 사용하여 주로 Hyphenator.js 라이브러리를 사용하여 영어 단어 분할을 구현합니다. Hyphenator.js는 Liang 알고리즘을 기반으로 영어 단어의 단어 분할을 구현합니다. 이 알고리즘은 단어의 연속성을 보장할 수 있을 뿐만 아니라 끝에 하이픈을 방지할 수도 있으며 글꼴 형식에 따라 하이픈 위치를 자동으로 조정할 수도 있습니다.

Hyphenator.js 라이브러리는 사용이 매우 간단합니다. HTML에 해당 js 및 css 파일을 도입하고 분할해야 하는 태그에 클래스 속성을 추가하기만 하면 됩니다.

다음은 자바스크립트 코드 예입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hyphenator.js示例</title>
        <!-- 引入Hyphenator.js的js和css文件 -->
        <script src="Hyphenator.js"></script>
        <link rel="stylesheet" href="Hyphenator.css">
        <style>
            .content {
                font-size:16px;
                width:200px; /* 宽度为200px */
                border: 1px solid #ccc;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 带有断词效果的文字 -->
        <div class="content hyphenate">This is an example of using Hyphenator.js to hyphenate words properly.</div>

        <!-- 初始化 -->
        <script>
            Hyphenator.config({
                displaytogglebox:true, /* 显示开关按钮 */
                classname: 'hyphenate', /* 断词class名称 */
                hyphenchar: '-', /* 连字符为- */
                language: 'en-us', /* 使用英文断词 */
                minwordlength : 4 /* 最小断词长度为4 */
            });
            Hyphenator.run();
        </script>
    </body>
</html>

로그인 후 복사

CSS의 Hyphens 속성과 비교하여 Hyphenator.js는 더 넓은 브라우저 지원을 제공하며 글꼴에 따라 하이픈 위치를 자동으로 조정할 수 있어 단어 분할 효과가 더 자연스럽게 만들어집니다. 그러나 Hyphenator.js를 사용하면 추가 js 파일을 사용해야 하므로 페이지 다운로드 시간이 늘어나고 html 문자열을 생성하거나 ajax를 통해 콘텐츠를 동적으로 로드할 때 Hyphenator.js의 기능이 필요합니다. 중단 단어를 달성하기 위해 다시 호출됩니다.

결론

이 기사에서는 영어 단어 분할을 달성하기 위해 javascript와 css를 사용하는 두 가지 방법을 소개합니다. 각각에는 몇 가지 장점과 단점이 있으므로 사용 시 실제 상황에 따라 선택해야 합니다.

하이픈 속성을 사용할 때는 브라우저 호환성 문제에 주의해야 하며, Hyphenator.js를 사용하는 동안에는 해당 언어 속성을 지정하는 데도 주의를 기울여야 합니다. 이로 인해 다운로드 시간이 늘어납니다. 페이지.

위 내용은 javascript+css로 영어 단어 분할을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.