입력 텍스트가 줄임표를 초과합니다(코드 예).-H5 튜토리얼-php.cn

입력 텍스트가 줄임표를 초과합니다(코드 예).

不言

풀어 주다： 2018-11-23 16:29:12

앞으로

3316명이 탐색했습니다.

본 글의 내용은 줄임표(코드 예시)를 넘어서는 내용입니다. 필요한 친구들이 참고하시면 좋을 것 같습니다.

입력은 텍스트 줄임표 기능을 구현합니다.

일반 요소에서는 텍스트가 너비를 초과하여 자동으로 줄임표로 바뀌는 것을 인식하는 것이 매우 간단합니다. 요소에 너비를 추가한 후 다음 세 가지 CSS를 추가하면 됩니다.

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

로그인 후 복사

입력 추가에 대해 생각해 본 적이 있나요? ="text" 요소도 이 효과를 추가합니까? 그림과 같이:

입력 텍스트가 줄임표를 초과합니다(코드 예).

입력은 타원을 초과하는 텍스트 기능을 구현합니다

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        padding: 15px;
        border: 1px solid #f60;
        margin: 50px auto;
    }
    .form-control{
        height: 30px;
        line-height: 30px;
        padding: 5px 10px;
    }
    .text-ellipsis{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    h2{
        width: 300px;
        margin: 10px auto;
    }
</style>

<h2>文字超出宽度自动变成省略号</h2>
<div>
    <input>
</div>

로그인 후 복사

실제로 텍스트가 텍스트를 초과할 때 타원의 자동 변경을 실현하도록 입력을 허용하는 것은 매우 간단합니다. . 여전히 동일한 세 가지 코드입니다. 테스트 결과 현재(2018-11-23) 최신 Chrome 및 Firefox 브라우저에서만 지원되며, 모바일 버전은 테스트되지 않았습니다!

위 내용은 입력 텍스트가 줄임표를 초과합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!