web-dev-qa-db-ja.com

CSS Ellipsisを使用してホバーに切り捨てられたテキストを表示すると、その下のテキストがオーバーラップします

サイドバーにnameタグがあり、1行を表示し、長いテキストの後にトリプルドット（lorem ipsum ...）が続く場合は切り捨て、ホバー時にフルテキストを表示する必要があります。

私はCSSを使用してこれを達成することができますが、私の問題は、フルテキストが表示されるときにその下のテキストと重なることです。 （添付画像）

HTML

<p class="name">
    Lorem ipsum lorem ipsum lorem ipsum
</p>

CSS

.name{
    color: #0079c1;
    height: 2em; 
    line-height: 1em; 
    font-size: 20px;
    font-weight: 400;
    text-overflow: Ellipsis;
    margin-bottom: 12px;
    cursor: pointer;
    Word-break: break-all;
    overflow:hidden;
    white-space: nowrap;
}

.name:hover{
    overflow: visible; 
    white-space: normal; 
}

JSFiddle

ホバー時にテキストが重なります。期待される動作は、コンテンツをその下にプッシュすることです。 enter image description here

htmlcsscss3ellipsis
10
Nakib

height:autoをhover状態に追加するだけで問題なく動作します：

JS Fiddle

.name{
    width:120px;
    color: #0079c1;
    height: 2em; 
    line-height: 1em; 
    font-size: 20px;
    font-weight: 400;
    text-overflow: Ellipsis;
    margin-bottom: 12px;
    cursor: pointer;
    Word-break: break-all;
    overflow:hidden;
    white-space: nowrap;
}
.name:hover{
    overflow: visible; 
    white-space: normal;
    height:auto;  /* just added this line */
}
<p class="name">
Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum
</p>
<span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.
</span>
25
Mi-Creativity

フォーム内のいくつかの長い電子メールアドレスで同様の問題に直面して、ツールチップスタイルの擬似要素でホバーに完全なコンテンツが表示されるこのソリューションを作成しました。

body{
  background:#eee;
}
.box{
  background:#fff;
  box-shadow: 0 25px 30px 0 rgba(0,0,0,0.15);
  border:rgba(0,0,0,0.3);
  width:10rem;
  margin:2rem auto;
  padding:2rem;
}
.Ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    transition: all .2s linear;
    white-space: nowrap;
    padding:.5rem 1rem;
}
.Ellipsis:focus, .Ellipsis:hover {
  color:transparent;
}
.Ellipsis:focus:after,.Ellipsis:hover:after{
    content:attr(data-text);
    overflow: visible;
    text-overflow: inherit;
    background: #fff;
    position: absolute;
    left:auto;
    top:auto;
    width: auto;
    max-width: 20rem;
    border: 1px solid #eaebec;
    padding: 0 .5rem;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.28);
    white-space: normal;
    Word-wrap: break-Word;
    display:block;
    color:black;
    margin-top:-1.25rem;
  }
<div class="box">
  <p class='Ellipsis' data-text='f6cd8edc-60c2-11e7-9919-ef706e78474f'>f6cd8edc-60c2-11e7-9919-ef706e78474f</p>      
  <p class='Ellipsis' data-text='Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.'>Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.</p>
</div>

https://codepen.io/natalitique/pen/gRdmre

完全なコンテンツでデータ属性を使用する必要があります。

18
Natalia