在一个标签内，有大文本，如何让文字部分显示背景色，而让换行的间隔部分不显示背景色

如，在P标签里有一段大文本，在设置背景色的时候整个区块都是背景的颜色，如何只让他在文字部分显示背景色，而在第一行和第二行的间隔部分不显示背景色？

在一个标签内，有大文本，如何让文字部分显示背景色，而让换行的间隔部分不显示背景色

15 个解决方案

#1

背景颜色的属性你放到应有的标签里面了？

#2

我怎么搞不懂你问的是什么

你说的区块是什么？是p元素？还是外层的div？

而且你这图片显示不是已经完成了吗？

你是不是想要只在文字上显示背景色，而不是整行显示背景色？
如果是这样的话，你只要用一个span元素或者其他什么行内元素包起来，然后给这个行内元素添加一个背景颜色就行啦

#3

引用 2 楼 zyb112211 的回复:

我怎么搞不懂你问的是什么

你说的区块是什么？是p元素？还是外层的div？

而且你这图片显示不是已经完成了吗？

你是不是想要只在文字上显示背景色，而不是整行显示背景色？
如果是这样的话，你只要用一个span元素或者其他什么行内元素包起来，然后给这个行内元素添加一个背景颜色就行啦

这是一个演示，并没有完成，如果是单纯设置p标签的background，整个p标签部分都会显示这个背景，但现在我不希望他整个区域都显示，我希望他能够在有限的区域显示背景颜色，如只有在有文字的部分显示背景颜色

#4

文字加上span标签，，为span设置背景色。。。

#5

引用 4 楼 gy127132060 的回复:

文字加上span标签，，为span设置背景色。。。

......有什么不一样吗

#6

引用 5 楼 yezheyan 的回复:

Quote: 引用 4 楼 gy127132060 的回复:

文字加上span标签，，为span设置背景色。。。

......有什么不一样吗

好好学习基础知识吧！！！！默认display值不同。

#7

引用 6 楼 gy127132060 的回复:

Quote: 引用 5 楼 yezheyan 的回复:

Quote: 引用 4 楼 gy127132060 的回复:

文字加上span标签，，为span设置背景色。。。

......有什么不一样吗

好好学习基础知识吧！！！！默认display值不同。

请你给出实例

#8



<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>

看出来了么？

#9

引用 8 楼 zpjshiwo77 的回复:



<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>

看出来了么？

你是在逗我吗

#10

引用 9 楼 yezheyan 的回复:

Quote: 引用 8 楼 zpjshiwo77 的回复:



<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>

看出来了么？

你是在逗我吗

你不是要实例么？不是给你了么？为何认为是在逗你？

#11

背景图片平铺

#12

引用 10 楼 zpjshiwo77 的回复:

Quote: 引用 9 楼 yezheyan 的回复:
Quote: 引用 8 楼 zpjshiwo77 的回复:
<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>
看出来了么？
你是在逗我吗
你不是要实例么？不是给你了么？为何认为是在逗你？

楼主在愚弄大家么。。。。

#13

<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<style>

p:nth-of-type(-n+2){

    background-color: green;

}


</style>

</head>

  

<body>

    <p>111111111</p>

    <p>2222222222</p>

  <p>333333333</p>

  <p>444444444444</p>

</body>

</html>

是否符合题主的意思？p:nth-of-type(-n+2); 这个css伪类选择符只支持ie 9以上。主流浏览器可以用。

#14

真是无语的很，搞前端的就这点水平？！
我要的是一个p标签<p>文本</p>里显示成这种: 文字部分有背景色，其余部分如间隔不显示

#15

引用 14 楼 yezheyan 的回复:

真是无语的很，搞前端的就这点水平？！
我要的是一个p标签<p>文本</p>里显示成这种: 文字部分有背景色，其余部分如间隔不显示

可以用背景图片平铺，

不然就要把每行分隔成单独的元素

#1

背景颜色的属性你放到应有的标签里面了？

#2

#3

引用 2 楼 zyb112211 的回复:

我怎么搞不懂你问的是什么

你说的区块是什么？是p元素？还是外层的div？

而且你这图片显示不是已经完成了吗？

你是不是想要只在文字上显示背景色，而不是整行显示背景色？
如果是这样的话，你只要用一个span元素或者其他什么行内元素包起来，然后给这个行内元素添加一个背景颜色就行啦

#4

文字加上span标签，，为span设置背景色。。。

#5

引用 4 楼 gy127132060 的回复:

文字加上span标签，，为span设置背景色。。。

......有什么不一样吗

#6

引用 5 楼 yezheyan 的回复:

Quote: 引用 4 楼 gy127132060 的回复:

文字加上span标签，，为span设置背景色。。。

......有什么不一样吗

好好学习基础知识吧！！！！默认display值不同。

#7

引用 6 楼 gy127132060 的回复:

Quote: 引用 5 楼 yezheyan 的回复:

Quote: 引用 4 楼 gy127132060 的回复:

文字加上span标签，，为span设置背景色。。。

......有什么不一样吗

好好学习基础知识吧！！！！默认display值不同。

请你给出实例

#8



<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>

看出来了么？

#9

引用 8 楼 zpjshiwo77 的回复:



<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>

看出来了么？

你是在逗我吗

#10

引用 9 楼 yezheyan 的回复:

Quote: 引用 8 楼 zpjshiwo77 的回复:



<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>

看出来了么？

你是在逗我吗

你不是要实例么？不是给你了么？为何认为是在逗你？

#11

背景图片平铺

#12

引用 10 楼 zpjshiwo77 的回复:

Quote: 引用 9 楼 yezheyan 的回复:
Quote: 引用 8 楼 zpjshiwo77 的回复:
<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<script src="jquery-2.1.4.js"></script>

<style>

p{

    background-color: green;

}

span{

    background-color: green;

}

</style>

</head>

 

<body>

    <p>111111111</p>

    <span>11111111</span>

</body>

</html>
看出来了么？
你是在逗我吗
你不是要实例么？不是给你了么？为何认为是在逗你？

楼主在愚弄大家么。。。。

#13

<!DOCTYPE html>

<html ng-app>

<head>

<meta charset="utf-8" />

<title></title>

<style>

p:nth-of-type(-n+2){

    background-color: green;

}


</style>

</head>

  

<body>

    <p>111111111</p>

    <p>2222222222</p>

  <p>333333333</p>

  <p>444444444444</p>

</body>

</html>

是否符合题主的意思？p:nth-of-type(-n+2); 这个css伪类选择符只支持ie 9以上。主流浏览器可以用。

#14

真是无语的很，搞前端的就这点水平？！
我要的是一个p标签<p>文本</p>里显示成这种: 文字部分有背景色，其余部分如间隔不显示

#15

引用 14 楼 yezheyan 的回复:

真是无语的很，搞前端的就这点水平？！
我要的是一个p标签<p>文本</p>里显示成这种: 文字部分有背景色，其余部分如间隔不显示

可以用背景图片平铺，

不然就要把每行分隔成单独的元素

秒客网

在一个标签内，有大文本，如何让文字部分显示背景色，而让换行的间隔部分不显示背景色

15 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

相关文章