Question

我正在努力在网页上显示数据库中的数据。

我的问题是有些数据很长并且不包含空格（想想很长的路径名），所以它会溢出表而不包装。

目前列的宽度是使用table-layout:auto确定的，因为我正在使用许多不同的数据库和表，所以我不想硬编码宽度。

因此，当我尝试使用overflow:wrap时，它只会将其他列分成一个字母宽的混乱。

以下是我的一些想法（我无法开展工作）：

使用table-layout:auto计算建议的宽度，将宽度设置为这些值，然后设置overflow:wrap。
告诉浏览器打破除空格以外的字符，即＆＃39; /＆＃39;。
如果列长于特定金额，则只设置overflow:wrap。

我目前正在使用CSS和一些JavaScript。

还有其他想法吗？

Answer 1

你必须使用：

您的css中的

max-width和overflow-x属性

＆＃13;

.table tr td {
   max-width: 100px;
    overflow-x: hidden;
    border: 1px solid #ff0000; 
}

＆＃13;

<table class="table">
    <tr>
      <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
       <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
        <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
         <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
    </tr>

<table>

＆＃13;

Answer 2

想到一些简单的解决方案：

对行使用带有手动触发扩展的省略号＆gt; N个字符

/a/really/long/file/name/that/is/really/just/too/l... [expand]

当您显示的数据不一定真正需要时，这可以起作用，如果用户感兴趣，用户可以选择查看所有数据。有了这个，您无需担心每个单元格的信息类型。

特定于数据的列宽

如果您知道将在列中显示的数据类型，则可以定义映射以调整列的宽度。

这需要一些额外的工作来获取列类型并配置映射，然后调整列的大小。

{ dataTypeWidths: { default: 'auto', filename: '300px' } }

Answer 3

您可以设置max-width与overflow-x: hidden和text-overflow: ellipsi相结合，我认为这样可以解决您的问题。

＆＃13;

td {
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td>Loremipsumdolorsitamet,consecteturadipiscingelit.Integertellusmassa,fringillaacquamnec,temporconguelectus.Sedimperdietaclacusidtempus.Sedutfelisaduiiaculistemporinasapien.Integervelliberomi.Morbiutenimsagittis,sollicitudinipsumin,ullamcorpersapien.Phasellusidfelisatligulatristiquehendrerit.Nuncsitametipsumidquamtinciduntfacilisis.Pellentesquehabitantmorbitristiquesenectusetnetusetmalesuadafamesacturpisegestas.Namsitametdictumeros.</td>
    <td>Pellentesquefermentummattisleo,sedblandittortorhendreritnec.Vestibulumeuturpislacus.Fusceliberorisus,dignissimegetsodalesnon,dictuminsem.Quisqueblanditmiante,eutristiqueorciporttitorsitamet.Donecpretium,eratetaccumsanfringilla,velitjustotristiqueorci,sedfringillaquamrisusnonenim.Praesenthendreritmassaultriceseratmalesuadapretium.Aeneansitametnuncsodales,vehiculaeroseget,ornarelorem.Proinquisfermentumsapien,utvehiculafelis.Duisquiseleifendleo.Suspendisseinnequefringilla,tristiquelectuseu,fermentumdiam.Nuncmassalectus,aliquamidmassaeu,pretiumullamcorperlectus.Aliquamfeugiatexegetornaretincidunt.Donectristiqueeratseddiamvehiculaauctor.Proinorcijusto,consecteturegetcursusut,pellentesquevelleo.Nampulvinarrisusetnislfacilisisaliquam.</td>
    <td>Inhachabitasseplateadictumst.Craspulvinarsuscipitfelis,ullamcorperpulvinarlorem.Vivamuspulvinarinterdumlibero.Maurisvenenatisaugueodio,aultriceserossuscipitvel.Donecutfelissitameteratconsecteturbibendumegetetnulla.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Crastempus,magnavelelementumlobortis,ipsummassaporttitorarcu,mollisvehiculaanteenimvitaelectus.Fuscemolliseumagnaapretium.Praesentegestasaugueanuncultricies,ataliquamodiodignissim.Insagittismaurisest,sedlacinialeoornareeu.VestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Namrisusaugue,gravidasedullamcorperin,feugiatetdolor.Maurisposuerenuncquam,necdignissimmassagravidatincidunt.Quisquesemperdiamlibero,intemporlectusullamcorperut.</td>
    <td>Suspendissevenenatisaliquamsapientinciduntconsequat.Aliquamveldiamegetsapienvehiculadapibus.Namblanditamagnaquisiaculis.Orcivariusnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Orcivariusnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Quisquelacinianunclorem,ultriciesvolutpatduifinibusquis.Praesentmalesuada,odioeuconsequatgravida,nisllacussagittismagna,sitametultriciesquamtellusporttitorelit.Fusceduilorem,viverraquisipsumet,pulvinaraliquamaugue.Donecinterdumscelerisquequamidfaucibus.Sedmollistinciduntquam,ideleifenddiammaximusa.Sedvitaemagnanonlectushendreritlacinia.Donecvenenatisauguevitaepulvinarpulvinar.Etiamposuereapurusetplacerat.Pellentesquefinibusdictumimperdiet.Crascursusfelisvelpellentesquerutrum.</td>
  </tr>
<table>

＆＃13;

Answer 4

如何使用：

word-break: break-word;

这将保持列宽并显示所有数据

＆＃13;

.table tr td {
   max-width: 100px;
    overflow-x: hidden;
    border: 1px solid #ff0000; 
    word-break: break-word;
}

＆＃13;

<table class="table">
    <tr>
      <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
       <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
        <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
         <td>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.</td>
    </tr>

<table>

＆＃13;

从@MrMins复制的代码段回答并更新。

当列的宽度未知时修复溢出问题

4 个答案:

对行使用带有手动触发扩展的省略号＆gt; N个字符

特定于数据的列宽