Hyphen Text und Symbol vertikal ausrichten

Ich habe eine <div>, die zwei span enthält. Eins mit einem (längeren) Text und Eins mit einem Icon. Der Text soll umbrochen werden (mit Bindestrichen) und das Symbol muss senkrecht dazu ausgerichtet sein.Hyphen Text und Symbol vertikal ausrichten

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/> 
    <style> 

    tr > th > span.text { 
     webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; 
    } 

    tr > th > span.icon { 
     float: right; vertical-align: middle; 
    } 
    </style> 
</head> 
<body> 
    <table width="200px" style="table-layout:fixed"> 
     <tr> 
      <th> 
       <span class="text" lang="de">Donaudampfschifffahrtsgesellschaftskapitän</span> 
       <span class="icon"> 
        <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> 
       </span> 
      </th> 
      <th> 
       <span class="text" lang="de">Donaudampfschifffahrtsgesellschaftskapitän</span> 
       <span class="icon"> 
        <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> 
       </span> 
      </th> 
     <tr> 
    </table> 
</body> 
</html>

sollte die resultierende HTML aussehen

Donaudampfschiff- 
fahrtsgesellschafts (icon here) 
kapitän

Quelle

2015-05-29 Christian Dietrich

Hier ist die Lösung:

HTML

<div class="container"> 
    <span class="text">Very very very very very long text.......</span> 
    <span class="icon"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt=""></span> 
</div>

CSS

.container { 
    display: table; 
} 

.container .text { 
    display: inline-block; 
    max-width: 100px; 
} 

.container .icon { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 15px; 
}

JSFiddle: http://jsfiddle.net/LeoAref/4L126nps/

Quelle

2015-05-29 11:25:54 LeoAref

nicht funktioniert - das OP längere Wörter erfordert Bindestriche verwendet werden gebrochen: http://jsfiddle.net/bupr4c2k/1/ – Paul

sich leider dies nicht arbeite in unserem Fall, da das äußere Diff eigentlich ein Tisch ist. Ich aktualisiere die Frage entsprechend –

@ChristianDietrich, die Tabelle ist das einzige Problem in meiner Lösung? – LeoAref

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 
    <meta content="IE=Edge" http-equiv="X-UA-Compatible"/> 
 
    <style> 
 

 
    .text { 
 
     webkit-hyphens: manual; 
 
\t \t -moz-hyphens: manual; 
 
\t \t -ms-hyphens: manual; 
 
\t \t -o-hyphens: manual; 
 
\t \t hyphens: manual; 
 
    } 
 
\t .icon { 
 
\t \t position:absolute; 
 
\t \t margin-left: 50px; 
 
\t \t top: 25px; 
 
\t } 
 
\t .my-text{ 
 
\t \t -webkit-hyphens: manual ; 
 
\t \t -moz-hyphens: manual ; 
 
\t \t -ms-hyphens: manual ; 
 
\t \t -o-hyphens: manual ; 
 
\t \t hyphens: manual ; 
 
\t } 
 
    </style> 
 
</head> 
 
<body> 
 
    <table style="width: 100px;"> 
 
     <tr> 
 
      <th> 
 
       <span class="text" lang="de">Donaudampfschiff&shy;fahrtsgesellschafts&shy;kapitän</span> 
 
       <span class="icon"> 
 
        <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> 
 
       </span> 
 
      </th> 
 
     <tr> 
 
    </table> 
 
\t 
 
\t <div style="width:170px;"> 
 
    \t <span class="my-text">Donaudampfschiff&shy;fahrtsgesellschafts<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">&shy;kapitän</span> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2015-05-29 11:43:11 Tachi

Ich möchte eigentlich Auto-Bindestriche verwenden. das funktioniert, solange das Ding kein Inline-Block ist. –

Nun, wenn ich Bindestriche auf Auto setze, trennt es die Wörter nicht richtig, wie Sie wollen, Sie können es selbst im obigen Beispiel versuchen. – Tachi

In meinem ersten Beitrag verpasste ich das Lang-Attribut. Wenn Sie das hinzufügen, funktioniert es in Firefox. –

Hyphen Text und Symbol vertikal ausrichten

Antwort

Verwandte Themen