집 > 기사 > 웹 프론트엔드 > 텍스트 오버플로가 자동으로 줄임표 CSS 메서드를 표시합니다.

텍스트 오버플로가 자동으로 줄임표 CSS 메서드를 표시합니다.

php中世界最好的语言원래의: 2018-03-19 13:53:562144검색

이번에는 텍스트가 넘칠 때 줄임표 CSS를 자동으로 표시하는 방법을 가져오겠습니다. 텍스트가 넘칠 때 주의해야 할 주의 사항은 무엇인지 함께 살펴보겠습니다.

원본 레이아웃을 깨뜨리지 않으려면 텍스트가 너무 많아서 다음과 같은 효과를 얻으려면 추가 텍스트를 줄임표로 바꿔야 합니다.

단어가 너무 많습니다...
이것은 많지 않습니다.

html: 목록입니다. ul/ol 둘 다 괜찮습니다.

<ul>
    <li>这是个短句子</li>
    <li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li></ul>

먼저 줄임표의 CSS 코드는 다음과 같습니다. text-overflow: 줄임표; 이 코드 줄은 다음 두 가지 조건을 충족해야 하기 때문에 종종 작동하지 않습니다. 1. 너비를 설정해야 합니다. white를 동시에 설정 -space: nowrap(줄 바꿈 없음) 및 Overflow: Hidden(초과 부분은 숨겨짐) 따라서 전체 CSS 코드는 다음과 같습니다.

li {
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。}

그러나 문제는 다음과 같습니다. li에 대해 Overflow:hidden을 설정하면 전체 목록의 list-style-type이 어떤 종류의 작은 아이콘이라도 다시 작동하지 않습니다. 설정하면 쓸모가 없습니다. 효과는 다음과 같습니다:

해결책: ul 추가 설정 list-style-position: inside;

하지만! ! ! 이때 아이콘은 표시되고 오버플로 텍스트는 숨겨지지만 타원은 어디에도 없습니다. . . .

결국 왜 이런 효과가 나타나는지 모르겠습니다. 그러나 불굴의 정신을 갖고 다시 시작하게 되었습니다. . . .

마음을 바꿔 목록에 있는 스타일을 몸 전체에 영향을 주는 스타일로 수정했어요. 을 사용하여 텍스트를 타원으로 묶으면 문제가 해결됩니다.

<ul>
    <li><span>这是个短文字</span></li>
    <li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li></ul>

css 코드:

span{
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。}

ul{
    list-style-type:circle;
    /*list-style-position: inside;注意，不需要添加这行代码*/
}

하하하. . . . 마침내 그런 일이 일어났습니다! ! ! ! 목록 기호와 타원이 모두 있습니다.

결론: 오버플로 텍스트 설정 시 목록 스타일 문제가 발생할 수 있으므로 li 태그에 직접 설정하지 않거나, 범위로 감싸서 범위 줄임표를 설정하세요.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!