HTML 테이블에서 앵커 태그 텍스트 가져오기를 자르는 방법
P粉547170972
2023-08-16 12:24:24
<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>
줄바꿈을 원하지 않는 경우
white-space:nowrap
;를 추가할 수 있습니다.
width
,设置为50px
,而不是50 px
(공백 없음)을 설정하려는 경우원한다면
width
生效,将你的<a>
设置为块级元素,例如使用display:inline-block
코드는 다음과 같습니다.