>  기사  >  웹 프론트엔드  >  CSS 자동 줄 바꿈을 설정하는 방법

CSS 자동 줄 바꿈을 설정하는 방법

coldplay.xixi
coldplay.xixi원래의
2021-03-02 10:52:5012061검색

CSS 자동 줄바꿈 설정 방법: [word-break] 속성을 사용하면 브라우저가 어떤 위치에서든 줄바꿈을 할 수 있습니다. 코드는 [.p3{width:200px;border:1px solid #ccc;word 입니다. -break:break-all].

CSS 자동 줄 바꿈을 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, DELL G3 컴퓨터.

CSS 자동 줄 바꿈 설정 방법:

자동 줄 바꿈 속성, word-break 속성을 ​​사용하면 브라우저가 어떤 위치에서든 줄 바꿈을 할 수 있습니다word-break属性,可以让浏览器实现在任意位置换行

它有三个属性值分别为:

  • normal: 浏览器中的默认换行行为

  • break-all:可允许在单词内换行

  • keep-all

    세 가지가 있습니다 속성 값:
    normal: 브라우저의 기본 줄 바꿈 동작

  • break- all: 단어 내 줄 바꿈이 허용됩니다

  • CSS 자동 줄 바꿈을 설정하는 방법keep-all: 줄 바꿈은 반각 공백이나 하이픈에서만 가능합니다

    예:

    <style>
    .p1{
    width:200px;
    border:1px solid #ccc;
    word-break:normal;
    }
     
    .p2{
    width:200px;
    border:1px solid #ccc;
    word-break:keep-all;
    }
     
    .p3{width:200px;
    border:1px solid #ccc;
    word-break:break-all;
    }
    </style>
    </head>
    <body>
    <p class="p1">Php Chinese website provides a large number of free, original, 
    high-definition php video tutorials.</p>
    <p class="p2">Php Chinese website provides a large   number of free, 
    original, high-definition php video tutorials.</p>
    <p class="p3">Php Chinese website provides a large number of free, original,
     high-definition php video tutorials.</p>
    </body>

    렌더링:
    🎜 🎜🎜🎜🎜관련 튜토리얼 권장 사항: 🎜CSS 비디오 튜토리얼🎜🎜🎜

위 내용은 CSS 자동 줄 바꿈을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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