Question

我有这个片段：

    <div>
       <p class="one">
          a long text that wrap in multiple rows. Lorem ipsum dolor sit amet, 
          consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
          ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          obcaecat cupiditat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.
       </p>
    </div>

长文本包含在div.Div标记为565px宽。因此，div中的文本可见多行（行），因为它包装文本。

我希望只有第一行成为超链接。

所以，我希望得到这个：

    <div>
       <p class="one">
          <a href="#">a long text that wrap in multiple rows. Lorem ipsum dolor sit amet, </a>
          consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
          ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          obcaecat cupiditat non proident, sunt in 
          culpa qui officia deserunt mollit anim id est laborum.
       </p>
    </div>

更新我正在测试这个：

<html>
<head>
<style type="text/css">
a:first-line
{
    color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
<a href="#">a long text that wrap in multiple rows. Lorem ipsum dolor sit amet,
              consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
              ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
              obcaecat cupiditat non proident, sunt in 
              culpa qui officia deserunt mollit anim id est laborum.</a>
</body>
</html>

来自http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstline

但似乎行不通。为什么伪选择器第一行不能用于超链接标记？

Answer 1

div中的文本会根据浏览器宽度自动换行。您可以引用DOM元素并使用“clientWidth”属性来评估段落中第一行的长度。迭代段落中的每个单词并评估clientWidth超过div宽度的条件。

Answer 2

因为我想你只想出于演示目的而获得它，你可以将所有文本包装在一个链接中，并只给出CSS的第一行链接外观。您无法将某些内容转换为CSS链接。

使段落的第一行与css或javascript（jquery）链接

2 个答案: