찾다

 >  Q&A  >  본문

HTML 테이블에서 앵커 태그 텍스트 가져오기를 자르는 방법

<p>요소의 앵커 텍스트 내의 텍스트를 자르려고 합니다. 앵커 태그 스타일에 <code>overflow:hidden; text-overflow:ellipsis;</code>를 추가했지만 여전히 래핑됩니다.这里有一些可以复现의HTML:</p> <p><br /></p> <pre class="brush:html;toolbar:false;"> <html lang="ko" xmlns="http://www.w3.org/1999/xhtml"> <머리> 테스트 테스트 123 </머리> <본문> <div style="width: 100%; padding-top: 1px;"> <div 클래스="내용" 스타일="너비: 512px; flex-shrink: 0; 여백-왼쪽: 자동; 여백-오른쪽: 자동; 디스플레이: 블록;"> <div class="contents-body" 스타일="디스플레이: 블록; 너비: 512px;"> <테이블 스타일="너비:50%; 테두리 접기: 축소; 여백-왼쪽: 자동; 여백-오른쪽: 자동;"> <본문> <tr style="justify-content:center;align-items:center;gap:56px;color:#848585"> <번째 스타일="padding-top:8px;padding-bottom: 10px; 글꼴 스타일:normal;font-weight:500;line-height:16px;letter-spacing:0.1px;text-align:left;width :25%">열 A <번째 스타일="padding-top:8px;padding-bottom: 10px; 글꼴 스타일:normal;font-weight:500;line-height:16px;letter-spacing:0.1px;text-align:left;width :25%">B열 </tr> <tr> <rowspan="3" 스타일="폭:25%; 패딩-상단:8px; 패딩-하단:8px; 텍스트-정렬:왼쪽;폰트-크기:14px;폰트-스타일:일반;폰트-중량:500;라인 높이:16px; letter-spacing:0.1px;">항목 A</td> <td style="padding-top:8px; padding-bottom:8px; text-align:left;font-size:14px;font-style: Normal;font-weight:400;line-height: 16px;letter- 간격:0.1px;텍스트 장식-줄:밑줄;"> <a style="color:#E25323; 오버플로: 숨김; 텍스트 오버플로: 줄임표; 너비: 50px;" href="https://localhost">ABC123ABC-ABC123ABC`</a> </td> </tr> </tbody> </테이블> </div> </div> </div> </body> </html></pre> <p><br /></p> <p>앵커 태그 텍스트의 50픽셀 너비가 마음에 들지 않는 것 같습니다. 열 너비가 문제인 것 같습니다. </p>
P粉547170972P粉547170972541일 전544

모든 응답(1)나는 대답할 것이다

  • P粉099145710

    P粉0991457102023-08-17 00:29:51

    줄바꿈을 원하지 않는 경우 white-space:nowrap;
    를 추가할 수 있습니다. width,设置为 50px,而不是 50 px(공백 없음)을 설정하려는 경우
    원한다면 width 生效,将你的 <a> 设置为块级元素,例如使用 display:inline-block

    코드는 다음과 같습니다.

    으아악

    회신하다
    0
  • 취소회신하다