如果不是行的第一个字，则添加css margin [英] Add css margin if not first word of a line

问题描述

我有另一个跨度。

 < span class =main> Text< span class = hlgt>突出显示的文字< / span>更多文字< / span> 
 

我想在内部hltg span中添加一个左边距，只有当该span的第一个单词不是在行的开头，而是只有最后一个单词的最后一个单词不是最后一个单词的右边距。

 。 hlgt {
 background-color：＃FFED00; 
 margin：0px 10px 
} 
 .main {
 color：＃3930FF; 
} 
  

我需要添加到我的css中做什么？

这里是一些截图，我的意思是，我从答案和评论中看到，上述不清楚。

hltg不在行的开头（即宽屏幕）我想要的边距。

当hltg不在行的开始处（即窄屏幕）时，当前仍然获得边距。 （我不想在这种情况下的左边）。

我想让窄屏幕看起来像这样。

虽然我已写入窄和宽屏幕，但这些条款只适合于包含的非常小的文本。很可能是，对于长文本，更宽的屏幕将在行的开始处具有hltg，并且较窄的屏幕将hlgt在中间。

感谢

解决方案

是一个解决方案如何解决这个问题。 （添加了额外的包装器以显示换行时的行为）

更新

更多文本和文本之间的差距现在解决了。

  .wrapper {width：50％; background-color：#ddd; } .main {color：＃3930FF; margin-right：10px;}。hlgt {background-color：＃FFED00; margin-right：10px;}。hlgt + .main {margin-right：0px;}  

 < div class =wrapper> < span class =main>文字< / span>< span class =hlgt>突出显示的文字< / span>更多文字< / span> < span class =main>文字< / span>< span class =hlgt>突出显示的文字< / span>更多文字< / span> < span class =main>文字< / span>< span class =hlgt>突出显示的文字< / span>更多文字< / span> < / div>  

>

您实际上也可以这样做，并以更少的标记获得相同的结果。

div class =snippetdata-lang =jsdata-hide =false>

  .wrapper {width：50％; background-color：#ddd; } .main {color：＃3930FF; margin-right：10px;}。hlgt {background-color：＃FFED00; margin-right：10px;}  

 < div class = wrapper> < span class =main>文本< / span> < span class =hlgt>突出显示的文字< / span> < span class =main>更多文字文字< / span> < span class =hlgt>突出显示的文字< / span> < span class =main>更多文字文字< / span> < span class =hlgt>突出显示的文字< / span> < span class =main>更多文字< / span> < / div>  

I have one span within another.

<span class="main">Text <span class="hlgt">Highlighted text</span> More text</span>

I want to add a left margin to the inner hltg span only if the first word of that span is not at the beginning of a line and a right margin only if it's last word is not the last word of the line.

.hlgt {
    background-color: #FFED00;
    margin: 0px 10px
}
.main {
    color:#3930FF;
}

What do I need to add to my css to do that?

Here's some screenshot of what I mean as I see from the answers and comments that the above is not clear.

When hltg is not at the begin of the line (i.e. wide screen) I want the margins.

When hltg is not at the begin of the line (i.e. narrow screen) I current still get the margins. (I do not want the left one in this case).

I want the narrow screen to look like this.

Although I have written narrow and wide screens the terms are just fitted to the included very small text. It could very well be that with a long text the wider screen will have the hltg in at the beginning of the line and the narrower screen the hlgt will be in the middle. Just adding this point for extra clarification.

Thanks

解决方案

Here is a solution how you could solve that. (Added the extra wrapper to show how it behaves when line breaks)

Update

The gap between the "More text" and "Text" is now solved.

.wrapper { width: 50%; background-color: #ddd; }

.main {
  color:#3930FF;
  margin-right: 10px;
}
.hlgt {
  background-color: #FFED00;
  margin-right: 10px;
}
.hlgt + .main {
  margin-right: 0px;
}

<div class="wrapper">
  <span class="main">Text </span><span class="hlgt">Highlighted text</span><span class="main"> More text</span>      
  <span class="main">Text </span><span class="hlgt">Highlighted text</span><span class="main"> More text</span>      
  <span class="main">Text </span><span class="hlgt">Highlighted text</span><span class="main"> More text</span>      
</div>

Update 2

You can actually do like this as well and get the same result with even less markup.

.wrapper { width: 50%; background-color: #ddd; }

.main {
  color:#3930FF;
  margin-right: 10px;
}
.hlgt {
  background-color: #FFED00;
  margin-right: 10px;
}

<div class="wrapper">
  
  <span class="main">Text </span>
  <span class="hlgt">Highlighted text</span>
  <span class="main"> More text
  
  Text </span>
  <span class="hlgt">Highlighted text</span>
  <span class="main"> More text
  
  Text </span>
  <span class="hlgt">Highlighted text</span>
  <span class="main"> More text</span>
  
</div>

这篇关于如果不是行的第一个字，则添加css margin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！