目標：在文本段落中給部分文本加上高亮（ pdf 那種），如下圖
代碼如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.generalText {
color: #333333;
font-family: "PingFang SC";
font-size: 14px;
background-color: #F4F8FF;
display: inline-block;
width: 400px;
}
.highLightText {
background: linear-gradient(rgba(0, 0, 0, 0) 55%, yellow 55%, yellow 100%);
display: inline-block;
}
</style>
</head>
<body>
<div class="generalText">
<span class="">紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁</span><span class="highLightText">紫薯布丁紫薯布丁紫薯布丁紫薯布丁</span><span class="">紫薯布丁</span>
</div>
</body>
</html>
問題1：當中間高亮的部分文字過長時先是會出現前后自動換行（如下圖），這是我想要避免的情況
問題2：當文字更長的時候，背景不是對每行文字的背景了，而變成了對整個span塊的背景（如下圖）
因為這個文本經常會改變，而且修改的人完全看不到css，只能輸入文本內容，所以我希望能夠保留下面的div內3個span塊（不是span的其他塊也行）的格式
<div>
<span></span>
<span></span>
<span></span>
</div>
預期效果如下圖（這是用很多個span塊一行一行寫出來的，很不方便，而且在寬度不同的時候會亂掉）：
求教該如何實作。
uj5u.com熱心網友回復：
去掉 display: inline-block; 就可以了啊。我測驗ie11和谷歌瀏覽器都可以。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/108308.html
標籤：HTML(CSS)
上一篇：急求，求加密方式的破解