HTML 텍스트 컨트롤에 표시되는 문자 수가 제한을 초과할 때 줄임표를 사용하는 방법

HTML 텍스트 컨트롤에 표시되는 단어 수가 한도를 초과하는 문제를 해결하는 방법은 무엇입니까? 즉, text Overflow는 표시되는 단어 수를 제어하고, table text Overflow는 td에 표시되는 단어 수를 제어합니다.

제목을 보면 쉽게 단어를 자르는 방법이 떠오를 것입니다. 텍스트를 입력하고 줄임표 "..."를 추가합니다. 하하, 바로 그거예요. 사실 이 로그를 쓰는 것은 단지 이 방법을 기록하기 위한 것일 뿐이다. 아직도 이런 상황에 어떻게 대처해야 하는지 기억하지 못하는 분들이 많은 것 같기 때문이다.

아래 사진은 PHP 중국어 홈페이지(www.php.cn) 단어수 초과 및 줄임표 추가 표시 효과입니다

먼저 우선 DIV가 일반적으로 사용된다는 점을 설명하겠습니다. 길이를 초과하는 +css 컨테이너의 텍스트는 상자 외부에 떠 있거나 상자가 확장됩니다. 이는 일반적으로 해결하기 쉽지만 오늘은 다음과 같은 문제가 발생했습니다. 테스트 페이지가 그랬습니다. IE6에서는 응답이 없는데 IE8에서는 테스트 페이지가 정상적으로 처리되는군요. 오버플로 텍스트를 보고 우울해졌습니다. 이 오버플로 처리는 IE 특유의 현상이 아닐까요? IE6이 제대로 작동하지 않는 이유는 무엇입니까? 나중에 온라인으로 확인해 보니 IE6은 DIV 내부에 작성된 경우에만 오버플로 처리를 지원하고, IE6 이상에서는

내부에만 쓰기를 지원한다는 사실을 알게 되었기 때문에 DIV에도 동일한 오버플로 처리 코드를 작성했습니다. 그리고

정상이에요, 땀! ! ! 다음은 내 처리 스크린샷입니다.
다음은 html 페이지의 코드입니다.

다음은 렌더링입니다(동일합니다. 처리 후):

다음은 위 두 오버플로 처리에 대한 코드입니다.

다음은 참고할 만한 인터넷상의 일부 처리 방법입니다.

일반 텍스트 잘림(인라인 및 블록에 적용 가능): [www.mb5u.com]

.text-overflow {
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

테이블 텍스트 오버플로 정의:
ww.m5u.com]

table{
width:30em;
table-layout:fixed;
}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

주의해야 할 점은 이 내용이 한 줄의 텍스트에서만 작동한다는 것입니다. 첫 번째 줄이 작동합니다. IE에서만 이런 식으로 "..."가 표시되며, 다른 브라우저에서는 텍스트가 지정된 너비를 초과하면 이를 숨깁니다.

오페라와 파이어폭스의 중국어 텍스트 오버플로 처리에 대한 심층 연구:
[문제]
최근 오페라에서 탐색할 때 내 공간의 오른쪽 절반이 초광각이 되어(저는 귀하와 동일한 조판 모드를 사용합니다) 표시 범위인 1024를 초과하고 창이 최대화되면 가로 스크롤 막대가 나타납니다. 제공한 방법에 따라 모든 모듈을 삭제한 후에도 문제가 있습니다. 참 헷갈리네요...
다른 패스로 새로운 공간을 오픈해서 같은 레이아웃을 사용했는데, 오페라에서는 문제가 없었습니다!
테스트 중에 확장된 공간을 테스트했기 때문일까요? 오른쪽에 두 번째 html 모듈을 추가하고 [그런 다음 삭제] 및 기타 작업으로 인해 공간 코드가 엉망이 되었습니까?

[이유]

다른 브라우저와의 호환성 문제는 정확히 말하면 다른 브라우저의 CSS 표준 구현에 따른 문제입니다. 우선, 표시되는 것은 Opera만이 아니라는 점을 알아야 합니다. 비정상적으로 Firefox는 아닙니다. Firefox는 표준 브라우저로 인정받고[물론 Opera도 마찬가지] 시장 점유율도 높기 때문에 인증에는 Firefox를 사용합니다.

[예]

1. Firefox는 줄임표(...) 속성을 지원하지 않습니다. 즉, 긴 문자열은 줄임표를 표시합니다. text-overflow: ellipsis;
이것은 로그 옵션에 있습니다. 스페이스 로그 편집 페이지에 아주 긴 카테고리 이름을 입력하고 로그를 편집하러 다시 오면 IE에서는 원래 카테고리 이름이 첫 번째 부분으로 표시되고 바로 해당 카테고리 이름으로 바뀌는 것을 볼 수 있습니다. 그러나 Firefox와 같은 브라우저에서는 인터페이스 프레임워크가 터질 때까지 매우 오랫동안 표시됩니다.

2. Firefox에서는 style="overflow:hidden"만 작동합니다. 또는

등 대신 ;p>3. 고정 링크 부분에서 IE 브라우저는 특히 너비를 초과하는 문자열을 래핑할 수 있습니다. 고정 링크의 주소 길이가 300px을 초과하면
.bvwordwrap{word-wrap:break-word;width:300px;left:0}및
Firefox와 같은 브라우저에서는 이 CSS 속성이 W3 표준을 준수하지 않기 때문에 word-wrap 속성이 인식되지 않습니다. FireFox에서 줄바꿈이 올바르도록 하려면 white-space:normal로 바꿔야 합니다. 및 IE에서는 단어 사이의 공백을 사용하여 바꿀 수 없습니다. 그렇지 않으면 줄 바꿈이 정확할 수 없습니다.

[관련] 추천]

1.

css는 텍스트 단어 수가 표시를 초과하는 문제를 해결합니다. 줄임표 방법... (한 줄, 여러 줄 텍스트)

2.

CSS를 사용하여 제목 표시 문자 수 초과 문제 해결

3.

온라인 HTML 무료 동영상 튜토리얼

위 내용은 HTML 텍스트 컨트롤에 표시되는 문자 수가 제한을 초과할 때 줄임표를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!