如何阻止文本跳过它自己的行

时间：2018-05-03 08:08:53

标签： css

这是my other post的后续内容，但有一个不同的问题。

我有三个CSS标签，每个标签旁边都有文字。

如何阻止大块文本跳转到下一行？

我需要在标签旁边开始文本（与下面的彩色示例相同，文本数量很少），然后在空间不足时将其包裹到下一行。

.list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list li {
    margin-bottom: 10px;
}
    
.list li > div:first-child{
    position: relative;
    border-left: 1px solid #fff;
    margin-right: 10px;
}      

.list li > div{
  display: inline-block;
}
.triangle, .triangle2 {
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 0;
    width: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #eee;
    border-bottom: 15px solid transparent;
    z-index: 1;
}  
      
.triangle2 {
    border-left-color: white;
    left: 0;
}
.label {
    letter-spacing: 1px;
    line-height: 30px;
    padding: 0 20px 0 30px;  
    text-decoration: none;
    cursor: default;
}

.neutral {
  background: #F5F4F9;
}
.neutral .triangle{
  border-left: 10px solid #F5F4F9;
}
.neutral .label {
  color: #999;
}

.positive {
  background: #DFF0D8;
}
.positive .triangle{
  border-left: 10px solid #DFF0D8;
}
.positive .label {
  color: #468847;
}

.negative {
  background: #F2DEDE;
}
.negative .triangle {
  border-left: 10px solid #F2DEDE;
}
.negative .label {
  color: #b94a48;
}
<ul class="list">
  <li>
    <div class='neutral'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div class="label-value">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
    </div>
  </li>
  <li>
    <div class='positive'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
  <li>
    <div class='negative'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
</ul>

3 个答案:

答案 0 :(得分：1)

删除文本周围的div，然后围绕标签automagically。

作为奖励，请向.list li > div添加一个底部边距，以便在看到距离标签太近时将新线向下推一点。

＆＃13;
＆＃13; 
.list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list li {
    margin-bottom: 10px;
}
    
.list li > div:first-child{
    position: relative;
    border-left: 1px solid #fff;
    margin-right: 10px;
}      

.list li > div{
  display: inline-block;
}
.triangle, .triangle2 {
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 0;
    width: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #eee;
    border-bottom: 15px solid transparent;
    z-index: 1;
}  
      
.triangle2 {
    border-left-color: white;
    left: 0;
}
.label {
    letter-spacing: 1px;
    line-height: 30px;
    padding: 0 20px 0 30px;  
    text-decoration: none;
    cursor: default;
}

.neutral {
  background: #F5F4F9;
}
.neutral .triangle{
  border-left: 10px solid #F5F4F9;
}
.neutral .label {
  color: #999;
}

.positive {
  background: #DFF0D8;
}
.positive .triangle{
  border-left: 10px solid #DFF0D8;
}
.positive .label {
  color: #468847;
}

.negative {
  background: #F2DEDE;
}
.negative .triangle {
  border-left: 10px solid #F2DEDE;
}
.negative .label {
  color: #b94a48;
}
＆＃13; 
<ul class="list">
  <li>
    <div class='neutral'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
  </li>
  <li>
    <div class='positive'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
  <li>
    <div class='negative'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用flexbox的解决方案：

  1. 在你的li元素上添加display: flex; align-items: flex-start;。

  2. 在你的li元素的第一个孩子上添加flex: none。

  3. 如果您想让文字居中，可以在第二个孩子身上添加一个小的衬垫

    4. 有关flex如何工作的详细说明，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/flex。

    注意：flex适用于IE10及更高版本，但您需要为IE10添加-ms-前缀。

    .list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}
    
.list li > div:first-child{
    position: relative;
    border-left: 1px solid #fff;
    margin-right: 10px;
    flex: none;
    padding-top : 0;
}      

.list li > div{
  display: inline-block;
  padding-top : 6px;
}
.triangle, .triangle2 {
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 0;
    width: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #eee;
    border-bottom: 15px solid transparent;
    z-index: 1;
}  
      
.triangle2 {
    border-left-color: white;
    left: 0;
}
.label {
    letter-spacing: 1px;
    line-height: 30px;
    padding: 0 20px 0 30px;  
    text-decoration: none;
    cursor: default;
}

.neutral {
  background: #F5F4F9;
}
.neutral .triangle{
  border-left: 10px solid #F5F4F9;
}
.neutral .label {
  color: #999;
}

.positive {
  background: #DFF0D8;
}
.positive .triangle{
  border-left: 10px solid #DFF0D8;
}
.positive .label {
  color: #468847;
}

.negative {
  background: #F2DEDE;
}
.negative .triangle {
  border-left: 10px solid #F2DEDE;
}
.negative .label {
  color: #b94a48;
}
    <ul class="list">
  <li>
    <div class='neutral'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div class="label-value">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
    </div>
  </li>
  <li>
    <div class='positive'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
  <li>
    <div class='negative'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
</ul>

答案 2 :(得分：0)

你可以使用＆＃34; float：left＆＃34;包装你的div（注意我移动了你的标签），但也许有一些更现代的方法

＆＃13;
＆＃13; 
.list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list li {
    margin-bottom: 10px;
}
    
.list li > div:first-child{
    position: relative;
    border-left: 1px solid #fff;
    margin-right: 10px;
}      

.list li > div{
  display: inline-block;
}
.triangle, .triangle2 {
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    height: 0;
    width: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #eee;
    border-bottom: 15px solid transparent;
    z-index: 1;
}  
      
.triangle2 {
    border-left-color: white;
    left: 0;
}
.label {
    letter-spacing: 1px;
    line-height: 30px;
    padding: 0 20px 0 30px;  
    text-decoration: none;
    cursor: default;
}

.neutral {
  background: #F5F4F9;
}
.neutral .triangle{
  border-left: 10px solid #F5F4F9;
}
.neutral .label {
  color: #999;
}

.positive {
  background: #DFF0D8;
}
.positive .triangle{
  border-left: 10px solid #DFF0D8;
}
.positive .label {
  color: #468847;
}

.negative {
  background: #F2DEDE;
}
.negative .triangle {
  border-left: 10px solid #F2DEDE;
}
.negative .label {
  color: #b94a48;
}
＆＃13; 
<ul class="list">
  <li>
    <div class="label-value">
      <div class='neutral' style="float: left">
        <span class="triangle2"></span>
        <span class="label">some text</span>
        <span class="triangle"></span>
      </div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
    </div>
  </li>
  <li>
    <div class='positive'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
  <li>
    <div class='negative'>
      <span class="triangle2"></span>
      <span class="label">some text</span>
      <span class="triangle"></span>
    </div>
    <div>
      Some other text
    </div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题