如何在标题值中有断行答案

【问题标题】：How to have break Line in title value如何在标题值中有断行
【发布时间】：2015-11-25 05:53:37
【问题描述】：

我已经创建了这段 HTML 代码，它有一个 css 样式的工具提示和一个指向该工具提示的链接，只要你将鼠标悬停在它上面就会显示一段文本。
但现在我想在我的工具提示中显示两行或多行文本。我怎样才能做到这一点？

我尝试使用\n 和<br> 但没有效果。

<!DOCTYPE html>
<html>
    
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
        </style>
        <title>CSS3 tooltip</title>
        <style type="text/css">
            .ordertooltip {
                display: inline;
                position: relative;
            }
            .ordertooltip:hover:after {
                background: #333;
                background: rgba(0, 0, 0, .8);
                border-radius: 5px;
                bottom: 26px;
                color: #fff;
                content: attr(title);
                left: 20%;
                padding: 5px 15px;
                position: absolute;
                z-index: 98;
                width: 220px;
            }
            .ordertooltip:hover:before {
                border: solid;
                border-color: #333 transparent;
                border-width: 6px 6px 0 6px;
                bottom: 20px;
                content:"";
                left: 50%;
                position: absolute;
                z-index: 99;
            }
        </style>
    </head>
    
    <body>
        </br>
        </br>
        </br>
        </br> <a title="1-Line One\n2-Line two<br>3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a>

    </body>

</html>

更新

好的，使用&#13; 的工作方式是我不应用我的css，但是当我应用它时它不再工作了。

更新 2

感谢您的回复，但我应该说我不能使用任何外部库。
而且我至少需要支持 Firefox，因此按 Enter 对我不起作用。

更新 3

我为自己的问题找到了解决方法并回答了here，但这肯定是不可接受的答案，因为它只是一种解决方法。希望有人为原始问题带来一个很好的解决方案。

【问题讨论】：

看看这个，可能你应该使用php文件stackoverflow.com/questions/358874/…
使用代码换行。检查这个 - stackoverflow.com/questions/3340802/…
您的标记中有错误。您正在关闭 </tr> 和 </table> 但没有在任何地方打开它。
@abhishekkannojia 好的，我修好了，但我需要回答我的主要问题
是固定提示还是动态文本？

标签： html css line-breaks

【解决方案1】：

如果有工具提示文本不改变运行时，那么你可以给.ordertooltip:Hover:after固定宽度

并使用&#013; 换行；

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>


<title>CSS3 tooltip</title>
	
<style type="text/css">
	
.ordertooltip{
  display: inline;
  position: relative;
 }
		
 .ordertooltip:Hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100px;
}
		
.ordertooltip:Hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
	
  </style>


</head>


<body>

</br></br></br></br>
<a title="1-Line One&#013;2-Line two&#013;3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a>


</body>
</html>

希望它有助于前进。

【讨论】：

感谢您的回答，虽然它似乎有效，但我觉得我应该告诉您我只有一个 html 页面，当我加载该页面时，我更改了工具提示的内容，因此工具提示可以有长文本或短文本，因此在您的解决方案排序中，文本仍然存在原始问题，而长文本几乎没有空间和力量分成两半。

【解决方案2】：

我通过添加数据属性解决了这个问题。

data-html="true"

并在标题中添加<br>：title="Requirement: <br> 0.7"。

【讨论】：

【解决方案3】：

你有几个选择：

使用工具提示插件（http://iamceege.github.io/tooltipster/ 还不错）
只需按“回车”键（并非所有浏览器都支持）

对于选项 2，代码如下所示：

<a title="First line
Second line
Third line">My link</a>

不过我没有测试浏览器的兼容性。

有关更多信息，请查看 thisstackoverflow 帖子。

选项 2 演示：

a { background-color: #c3c3c3; display: block; width: 100px; height: 100px; }

<a title="This is a title
Second line
Third line">Contents</div>

然后只需添加您自己的自定义 CSS。

但就个人而言，如果我是你，我只会使用工具提示库。它更简单，有很多选择。不要重新发明轮子！ :)

【讨论】：

感谢您的回答，但我不能使用任何外部库，并且我需要至少支持 Firefox，仅按 Enter 键在 fire fix 中不起作用。
@MasihAkbari 没有外部库？ :( 在这种情况下，您基本上必须重新创建一个更简单的库版本。基本上，使用 javascript/jquery，当用户将鼠标悬停在 <a> 标签上时，使用 event 变量动态获取光标的位置在那个位置创建一个 html 元素。虽然复杂且混乱。
问题是我不能使用任何 javascript/jquery
@MasihAkbari 哦。我现在明白了。不幸的是，这让它变得非常困难......我注意到另一个答案是，当空间不足时，线路会中断。作为一个非常可怕的黑客，我想知道你是否可以输入很多随机空格来强制它创建一个新行。编辑：不。 :(

【解决方案4】：

我不接受我自己的答案，因为这只是一种解决方法而不是答案

我已经更改了我的 css 并在我的 html 中使用了 span，所以现在我可以用 <br> 标记换行。

<!DOCTYPE html>
<html>
    
    <head>
        <style type="text/css">
            .txt {
				display: inline-block;
				position: relative;
			}
			.ordertooltip {
				display: none;
				width: 200px;
				position: absolute;
				padding: 8px;
				margin: 4px 0 0 4px;
				top: 20;
				left: 16px;
				border: 1px solid #76B6D7;
				border-radius: 0px 8px 8px 8px;
				background: #bedffe;
				font-size: 15px;
				box-shadow: 0 1px 2px -1px #21759B;
				z-index: 999;
				background-position: 0 0;
				border-color: #76B6D7;
				background-color: #bedffe;
				box-shadow-color: #21759B;
			}
			.txt:hover .ordertooltip {
				display: block;
			}
        </style>
    </head>
    
    <body>
        </br>
        </br>
        </br>
        </br> 
		<span class="txt">My Tip</a>
				<span class="ordertooltip">1-Line One<br>2-Line two<br>3-Line Three</span>
		</span>

    </body>

</html>

【讨论】：