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"만 작동합니다. 또는

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

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

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