So legen Sie Text in HTML fest, ohne ihn umzubrechen

So legen Sie fest, dass Text nicht in HTML umgebrochen wird: 1. Allgemeine Textkürzung, der Code ist [word-break:keep-all;white-space:nowrap;] 2. Verstecken Sie den überschüssigen Inhalt, der Code ist [overflow :versteckt ;].

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5-Version, DELL G3-Computer.

So legen Sie Text ohne Zeilenumbruch in HTML fest:

Allgemeine Textkürzung (gilt für Inline und Block):

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

Für Tabellen ist die Definition anders:

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

Verwandte Lernempfehlungen: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie Text in HTML fest, ohne ihn umzubrechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!