文字のbackground-colorを文字に沿って表示させたい。

Question

前提・実現したいこと

この画像のように文字数によって白枠がストップするようにしたいのですが、

このようにブロック全体に広がってしまいます。

該当のソースコード

<div class="page-title">
	<div class="page-title-inner">
		<div class="page-title-image"></div>
		<div class="page-title-txt">
			<p>会社案内</p>
			<h1>「リアル×WEB」をテーマに、</h1>
			<h1>地域・会社の魅力や価値を伝えます。</h1>
		</div>
	</div>
</div>

.page-title {

	.page-title-inner{

		position: relative;

		.page-title-image{
			position: absolute;
			top: 0;
			left: 0;
			background-image: url(../images/company/page_header-company.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			width: 80vw;
			height: 420px;
			z-index: 2;
		}

		.page-title-txt{

			position: absolute;
			top: 100px;
			right: 100px;
			z-index: 3;

			p{
				background-color: $color4;
				color: #fff;
				font-size: 1.6rem;
				font-weight: bold;
				display: inline-block;
				padding: 10px 20px;
				margin-bottom: 15px;
			}

			h1{
				background-color: #fff;
				color: #333;
				padding: 0px 20px;
				display: block;
				font-size: 3.2rem;
				margin-bottom: 15px;
			}
		}

	}
}

試したこと

display: inline-block；にすれば可能だと思うのですが、縦に並べたときに背景カラーがブロックいっぱいに広がってしまいます。

お手数おかけしますが、回答お待ちしております。（ ; ; ）

Comments

[kei344]

「背景カラーが100%」とは？

[UKYO9311]

kei344様
いつもありがとうございます。すみません文言修正しました！！ブロックいっぱいに広がってしまうの間違いでした。。。

[m.ts10806]

コンパイル後のCSSを提示されたほうが回答を得やすくなるかと（再現確認しようと思うと結局CSSコンパイルが必要になるので）

Answer 1

そもそもh1の多用はどうかと思いますが、いっそh1にspanを入れ込んでしまうとか

<style>
h1 {text-align:center;} /*センタリングするなら*/
h1 span{background-Color:yellow;display:inline-block;margin:auto;}
</style>

<div class="page-title">
    <div class="page-title-inner">
        <div class="page-title-image"></div>
        <div class="page-title-txt">
            <p>会社案内</p>
            <h1><span>「リアル×WEB」をテーマに、</span></h1>
            <h1><span>地域・会社の魅力や価値を伝えます。</span></h1>
        </div>
    </div>
</div>

Comments

[UKYO9311]

解決いたしました！！！（ ; ; ）
ありがとうございます！！！