html – 如果不是一行的第一个单词,添加css边距

概述我在另一个范围内有一个跨度. <span class="main">Text <span class="hlgt">Highlighted text</span> More text</span> 我想在内部hltg跨度中添加左边距,只有当该跨度的第一个单词不在一行的开头时才会添加左边距,而只有当它的最后一个单词不是该行的最后一个单词时才是右边距. .hlgt { background-c 我在另一个范围内有一个跨度.

<span >Text <span >Highlighted text</span> More text</span>

我想在内部hltg跨度中添加左边距,只有当该跨度的第一个单词不在一行的开头时才会添加左边距,而只有当它的最后一个单词不是该行的最后一个单词时才是右边距.

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

我需要在CSS中添加什么才能做到这一点？

这是我的意思截图,我从答案和评论中看到上述内容尚不清楚.

当hltg不在行的开头(即宽屏幕)时,我想要边距.

hltg is not at the begin of the line http://creative-scripts.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-19-at-13.45.07-copy.jpg

当hltg不在线的开头(即窄屏)时,我当前仍然获得边距. (在这种情况下我不想要左边的那个).

narrow screen puts in unwanted margins] http://creative-scripts.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-19-at-13.45.35-copy.jpg

我希望窄屏看起来像这样.

narrow screen no margin added] http://creative-scripts.com/wp-content/uploads/2015/11/Screen-Shot-2015-11-19-at-13.46.11-copy.jpg

虽然我已经编写了窄屏和宽屏,但这些术语只适用于所包含的非常小的文本.很有可能,对于长文本,较宽的屏幕将在行的开头处具有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 >  <span >Text </span><span >Highlighted text</span><span > More text</span>        <span >Text </span><span >Highlighted text</span><span > More text</span>        <span >Text </span><span >Highlighted text</span><span > More text</span>      </div>

更新2

你也可以这样做,并以更少的标记获得相同的结果.

.wrapper { wIDth: 50%; background-color: #ddd; }.main {  color:#3930FF;  margin-right: 10px;}.hlgt {  background-color: #FFED00;  margin-right: 10px;}

<div >    <span >Text </span>  <span >Highlighted text</span>  <span > More text    Text </span>  <span >Highlighted text</span>  <span > More text    Text </span>  <span >Highlighted text</span>  <span > More text</span>  </div>

总结

以上是内存溢出为你收集整理的html – 如果不是一行的第一个单词,添加css边距全部内容，希望文章能够帮你解决html – 如果不是一行的第一个单词,添加css边距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。