【问题标题】:css background color only of text justify仅文本的 css 背景颜色对齐
【发布时间】:2014-08-28 18:28:30
【问题描述】:

我只想设置对齐文本的背景颜色 (比如鼠标选中文本时)

我试过div

spandiv

p 不带margin

h1显示内联,

但是这些解决方案都没有解决我的问题。

不是::selection伪,而是始终显示的文本背景


我想要这个:

请帮忙


Fiddle

【问题讨论】:

  • 奇怪。 <span><div> 里面是为我做的吗?请参阅下面的答案。

标签: css background-color text-justify


【解决方案1】:

你可以试试this

HTML

<div class="CC ">
    <div class="bg">Lorem ipsum dolor sit amet</div>
</div>

CSS

.bg {
    background-color:red;
    display:inline;
    padding: 1px 0
}

【讨论】:

    【解决方案2】:

    所需的外观需要使用内联元素,因为这是在文本结束处停止背景的方法。由于您还需要对齐文本,这需要一个块元素,因此您需要两个元素:一个 span,包含块的所有文本,嵌套在 divp 内:

    <div class="CC"><span class="CCC">Lorem ipsum ... in futurum.</span></div>
    

    你刚刚在span元素上设置了背景:

    .CCC { background: red; color: yellow }
    

    【讨论】:

      【解决方案3】:

      你可以这样尝试:DEMO

      HTML:

        <div class="CC ">
              <div class="bg">Lorem ipsum dolor sit amet
      </div></div>
      

      CSS:

      .bg {
          background-color:red;
          display:inline;
      }
      

      【讨论】:

      • 我在chrome和firefox下试过你的代码,但是行之间有灰线...
      • 只需在 .CC 上添加 line-height 即可解决此问题:jsfiddle.net/danield770/tsXuH/13
      【解决方案4】:

      你可以这样给予

      ::selection {
          background: #ffb7b7; /* Safari */
          }
      ::-moz-selection {
          background: #ffb7b7; /* Firefox */
      }
      

      p::selection {
          background: #ffb7b7; /* Safari */
          }
      

      【讨论】:

        【解决方案5】:

        background 属性设置为您喜欢的任何颜色。

        Updated JSFiddle.

        【讨论】:

          猜你喜欢
          • 2012-08-11
          • 2019-04-22
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多