>  기사  >  웹 프론트엔드  >  CSS를 사용하여 제목의 문자 수를 줄임표로 바꾸는 문제 해결

CSS를 사용하여 제목의 문자 수를 줄임표로 바꾸는 문제 해결

PHPz
PHPz원래의
2017-06-06 09:26:323158검색

제목의 단어 수가 장면을 초과합니다.

CSS를 사용하여 제목의 문자 수를 줄임표로 바꾸는 문제 해결

가장 왼쪽 열에 줄 바꿈할 수 없습니다. 어떻게 해야 하나요?

1단계: 내용이 너비를 초과할 때 초과된 내용 숨기기

2단계: 내용이 너비를 초과할 때 생략된 내용 표시 객체 오버플로 표시(...)

해결 방법은 다음과 같습니다.

table{
	width:100px;
	table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
	width:100%;
	word-break:keep-all;/* 不换行 */
	white-space:nowrap;/* 不换行 */
	overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
	text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/

[관련 권장 사항]

1. 숫자가 있을 때 줄임표를 사용하세요. HTML 텍스트 컨트롤에 표시되는 단어 수가 메서드를 초과합니다

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

3. 온라인 CSS는 무료입니다. 동영상 튜토리얼

위 내용은 CSS를 사용하여 제목의 문자 수를 줄임표로 바꾸는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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