줄의 시작 부분에 항상 표시되도록 아이콘을 정렬하는 방법 - CSS

Question

제목 표시 줄에 표시 할 긴 이름이 있고 제목 옆에 항상 맨 위 또는 위에 있어야하는 아이콘이 있습니다. 긴 제목의 첫 번째 줄에. 지금은 아이콘이 매 줄 바꿈마다 푸시 다운됩니다.

예 :

난 다음 맨 위 행이 시작되는 곳으로, 상단에 항상 아이콘을 볼 수 있도록 노력하고있어.

HTML :

<div class="wrapper"> 
<span class="span_wrapper">sometextsometextsometext sometext sometext sometext sometextsometextsometext sometextsometextsometext sometextsometextsometext sometextsometextsometext 
</span> 
<span class="span_wrapper_icon"><span class="qx qx-left-arrow style="cursor: pointer;"></span></span></div> 

CSS :

.wrapper { 
    padding: 10px; 
    background-color: #1361B0; 
    height: 100%; 
    font-size: 20px; 
    color: #F5F5F5; 
    font-weight: 300; 
    font-family: Roboto; 
    box-shadow: 0 9px 0 0 #F7F7F7, 0 -9px 0 0 #F7F7F7, 3px 0 8px -2px #607D8D, -3px 0 8px -4px #607D8D; 
} 

.span_wrapper{ 
    line-height: 30px; 
    font-size: 20px; 
    word-break: break-word; 
} 

.span_wrapper_icon { 
    float: left; 
    margin-right: 10px; 
    position: relative; 
    top: 2px; 
} 

.qx qx-left-arrow { 
    display: inline-block; 
    text-align: center; 
    font-size: 16px; 
    width: 16px; 
    padding: 5px; 
} 

어떤 아이디어가? 감사!

Answer 1

span_wrapper_icon 위의 span_wrapper_icon을 이와 같이 지정하십시오.

<div class="wrapper"> 
    <span class="span_wrapper_icon"><span class="qx qx-left-arrow" 
    style="cursor: pointer;"></span></span> 

    <span class="span_wrapper">sometextsometextsometext sometext sometext 
    sometext sometextsometextsometext sometextsometextsometext 
    sometextsometextsometext sometextsometextsometext 
    </span> 

</div> 

희망이

을하는 데 도움이