खड़ी Hyphend पाठ संरेखित और आइकन

मैं एक <div> कि दो span शामिल है। एक आइकन के साथ एक (लंबा) पाठ और एक के साथ एक। पाठ लपेट जाएगा (हाइफ़न का उपयोग करके) और आइकन लंबवत रूप से इसके साथ गठबंधन किया जाएगा।खड़ी Hyphend पाठ संरेखित और आइकन

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

जिसके परिणामस्वरूप एचटीएमएल दिखना चाहिए

Donaudampfschiff- 
fahrtsgesellschafts (icon here) 
kapitän

स्रोत

2015-05-29 Christian Dietrich

यहाँ की तरह समाधान है:

एचटीएमएल

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

सीएसएस

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

स्रोत

2015-05-29 11:25:54 LeoAref

काम नहीं करता - ओपी अब शब्द हाइफ़न का उपयोग कर तोड़ा जा की आवश्यकता है: http://jsfiddle.net/bupr4c2k/1/ – Paul

Unforunately इस नहीं है हमारे मामले में काम करते हैं क्योंकि बाहरी अंतर वास्तव में एक टेबल है। मैं –

@ क्रिस्टियन डायट्रिच के अनुसार प्रश्न को अद्यतन करता हूं, तालिका मेरे समाधान में एकमात्र समस्या है? – 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>

स्रोत

2015-05-29 11:43:11 Tachi

मैं वास्तव में ऑटो-हाइफ़न का उपयोग करना चाहता हूं। यह तब तक काम करता है जब तक कि यह एक इनलाइन-ब्लॉक –

नहीं है, ठीक है, अगर मैं ऑटो को हाइफ़न डालता हूं तो यह शब्दों को सही तरीके से अलग नहीं करता है, जैसा कि आप चाहते हैं, उदाहरण के लिए आप इसे स्वयं कोशिश कर सकते हैं। – Tachi

मेरी पहली पोस्ट में मैंने लैंग विशेषता को याद किया। यदि आप इसे जोड़ते हैं तो यह फ़ायरफ़ॉक्स में काम करता है। –

खड़ी Hyphend पाठ संरेखित और आइकन

उत्तर

संबंधित मुद्दे