Text einkürzen

[en-trust]

Es gibt in css die Möglichkeit über ... den Text einzukürzen.

Code Auswählen Erweitern


.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


Diesen wollte ich dann für meinen Kalender in der Beschreibung nutzen. Allerdings zeigt er mir immer noch den kompletten Text, selbst wenn ich die Breite auf nur 50 setze.

Code Auswählen Erweitern


<table width="100%">
<tr>             
  <td style="width: 10px">&nbsp;</td>                                         
  <th class="normal semitransparenttext">Datum                                     
  </th>                                 
  <td style="width: 10px">&nbsp;</td>                         
  <th class="normal semitransparenttext">Uhrzeit                                     
  </th>                                 
  <td style="width: 10px">&nbsp;</td>                         
  <th class="normal semitransparenttext">Dauer                                     
  </th>                                 
  <td style="width: 10px">&nbsp;</td>                         
  <th class="normal semitransparenttext">Beschreibung                                     
  </th>                                 
  <td style="width: 10px">&nbsp;</td>                                                               
</tr>
<tr> 
  <td style="width: 10px">&nbsp;</td>  <td>
    <div class="normal" data-type="calview" data-device="vCal_Familienkalender" data-get="all" data-detail=["bdate"] data-max="8" data-part="(\d\d\.\d\d\.).*">
    </div></td> 
  <td style="width: 10px">&nbsp;</td>  <td>
    <div class="normal" data-type="calview" data-device="vCal_Familienkalender" data-get="all" data-detail=["btime"] data-max="8" data-part="(\d\d\:\d\d).*">
    </div></td> 
  <td style="width: 10px">&nbsp;</td>  <td>
    <div class="normal" data-type="calview" data-device="vCal_Familienkalender" data-get="all" data-detail=["etime"] data-max="8" data-part="(\d\d\:\d\d).*">
    </div></td> 
  <td style="width: 10px">&nbsp;</td>  <td>
    <div class="normal truncate" data-type="calview" data-device="vCal_Familienkalender" data-get="all" data-detail=["summary"] data-max="8">
    </div>
    </p></td> 
  <td style="width: 10px">&nbsp;</td>
</tr>
</table>


Hat jemand eine Idee ?

[CoolTux]

Ich denke mal du hast bessere Chancen auf Antwort wenn Du im Frontend Forum hin verschiebst. Eventuell TabletUI?

[en-trust]

wer kann es verschieben ?

[Fixel2012]

wer kann es verschieben ?

Du selbst, scroll mal nach ganz unten, dort sollte es irgendwo stehen

[CoolTux]

ganz unten links, Thread verschieben

[Patrick85]

Bei mir funktioniert es so

CSS

Code Auswählen Erweitern

.table_calendar     {border-collapse:collapse;border-spacing:0; font-family: 'Open Sans', sans-serif; font-size:14px; width: 398px; table-layout:fixed;}
.table_calendar sum {text-overflow: ellipsis; font-weight: bold; overflow: hidden;}

Tablet UI

Code Auswählen Erweitern

<table class="table_calendar">
<tr>
<td>
<sum><div data-type="label" data-device="CalView_EG" data-get="t_001_summary"></div></sum>
</td>
</tr>
</table>

[en-trust]

Hat nichts gebrach, sieht genauso aus wie vorher.

Code Auswählen Erweitern


  <style>
  .table_calendar {border-collapse:collapse; border-spacing:0; width: 100%; table-layout:fixed;}
  .table_calendar summary {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}         
  </style>

              <summary>                                 
                <div data-type="calview" data-device="vCal_Familienkalender" data-get="all" data-detail=["summary"] data-max="8">                             
              </summary>


[en-trust]

Keiner eine Idee ?