html - 如何对齐图标以始终显示在一行 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 之上。

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

希望对你有帮助