0

我有这个片段：

    <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

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

4

2 回答 2

0

div 内的文本会根据浏览器宽度自动换行。您可以获得对 DOM 元素的引用并使用“clientWidth”属性来评估段落中第一行的长度。遍历段落中的每个单词并评估 clientWidth 超过 div 宽度的情况。

于 2012-05-14T12:36:08.437 回答
0

由于我猜您只想出于演示目的而获得它，因此您可以将所有文本包装在链接中，并仅使用 CSS 给出第一行链接外观。您不能使用 CSS 将某些内容转换为链接。

于 2012-05-14T12:40:10.117 回答