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

时间:2021-01-17 14:51:45
如,在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


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

你说的区块是什么?是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>里显示成这种: 文字部分有背景色,其余部分如间隔不显示


可以用背景图片平铺,

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