FHEM Forum

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


.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.

<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 ?

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

wer kann es verschieben ?

Zitat von: en-trust am 20 Juni 2017, 14:25:53
wer kann es verschieben ?

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

ganz unten links, Thread verschieben

Bei mir funktioniert es so

CSS
.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
<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>

Hat nichts gebrach, sieht genauso aus wie vorher.


  <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>


Keiner eine Idee ?