줄바꿈 없이 한 줄에 머물도록 CSS 글꼴을 구현하는 방법

깨짐 없이 한 줄에 유지되도록 CSS 글꼴을 구현하는 방법: 1. "word-break:keep-all;white-space:nowrap;" 속성을 사용하여 텍스트가 끊어지지 않음을 인식합니다. 테이블 속성 설정 텍스트의 word-break"는 줄 바꿈되지 않습니다.

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

css의 같은 줄에 글꼴을 설정하는 방법:

일반 텍스트는 줄바꿈되지 않습니다(인라인 및 블록에 적용 가능):

.text-overflow {
    display:block;               /*内联对象需加*/
    width:31em;
    word-break:keep-all;       /* 不换行 */
    white-space:nowrap;       /* 不换行 */
    overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ；
                              需与overflow:hidden;一起使用。*/
}

테이블에 텍스트 설정 줄 바꿈 안 함 ：

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

줄 바꿈 없이 텍스트를 구현하기 위한 위 코드 소개:

word-break:keep-all 설정은 반자 공백이나 하이픈에서만 줄을 나눌 수 있습니다.

white-space:nowrap 스타일 설정 텍스트는 줄바꿈되지 않으며
태그가 나타날 때까지 텍스트는 같은 줄에 계속 표시됩니다.

위 내용은 줄바꿈 없이 한 줄에 머물도록 CSS 글꼴을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!