HTML 텍스트 아래에 점선 밑줄을 추가하는 방법

96

텍스트 아래의 줄이 표준 밑줄이 아닌 점선이되도록 HTML 텍스트에 어떻게 밑줄을 긋나요? 가급적이면 별도의 CSS 파일을 사용하지 않고이 작업을 수행하고 싶습니다. 저는 html의 초보자입니다.

html underline

— 파라 프
소스

13

왜 CSS를 사용할 수 없습니까? 페이지를 하나의 이미지로 만들고 mspaint로 줄을 추가 할 수 있습니까?

— epascarello 2013 년

나는 그것이 CSS없이 할 수 있다고 생각하지 않습니다

— Cfreak

당신은 CSS를 사용해야하지만,이 배경 이미지를 사용하여 수행 할 수있는, 국경 바닥은 가장 좋은 방법입니다

— kingdomcreation

4

야. 나는 그가 "CSS없이"가 아니라 "별도의 CSS 파일을 사용하지 않고"라고 말했다고 생각한다. 초보자를 숭배하십시오.

— Stefan Reich

138

CSS 없이는 불가능합니다. 사실, <u>태그는 단순히 text-decoration:underline브라우저의 내장 CSS를 사용하여 텍스트에 추가 하는 것입니다.

수행 할 수있는 작업은 다음과 같습니다.

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

— 알프레드 싱
소스

당신에 <head>요소하는 추가 <style>태그 (나는 내 대답을 편집 한)

— 알프레드 싱

2

당신은 또한 시도 할 수 있습니다 dotted대신dashed

— 브라이언 화상

좋은 해결책이며 가능합니다. 나에게 그것을위한 코드 JS하지 마십시오)

— 아멧 캔하기 Guven

다음은 여러 줄 텍스트 지원에 대한 답변입니다. stackoverflow.com/a/4365458/1078641

— electroid

31

다음 CSS 코드 사용 ...

text-decoration:underline;
text-decoration-style: dotted;

— Shakeel Ahmed
소스

3

이것은 받아 들여진 대답이어야합니다. 상자 모델에 따라 점선 border을 사용 padding하면 텍스트 외부에 배치 되므로 텍스트에서 멀어집니다.

— Ryan Walker

2

짧은 구문이 있습니다. text-decoration: underline #000 dotted;첫 번째 속성은 라인이고 두 번째는 색상이고 세 번째는 스타일입니다.

— Sos Sargsyan

개선을위한 Sos 감사합니다

— Shakeel Ahmed

15

CSS가 없으면 기본적으로 이미지 태그를 사용해야합니다. 기본적으로 텍스트의 이미지를 만들고 밑줄을 추가하십시오. 이는 기본적으로 화면 판독기에 페이지가 쓸모 없다는 것을 의미합니다.

CSS를 사용하면 간단합니다.

HTML :

<u class="dotted">I like cheese</u>

CSS :

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

실행 예

예제 페이지

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>

— 에 파스 카렐로
소스

9

HTML5 요소는 점선 밑줄을 줄 수 있으므로 텍스트 아래에는 일반 밑줄이 아닌 점선이 있습니다. 그리고 title 속성은 사용자가 요소 위에 커서를 놓으면 도구 설명을 만듭니다.

참고 : 점선 테두리 / 밑줄은 기본적으로 Firefox 및 Opera에 표시되지만 IE8, Safari 및 Chrome에는 CSS 줄이 필요합니다.

<abbr title="Hyper Text Markup Language">HTML</abbr>

— 파티마 와히드
소스

이것이 정답입니다. 짧고 CSS가 없습니다. 감사.

— Saeed Ahadian

4

콘텐츠에 한 줄 이상이있는 경우 아래쪽 테두리를 추가해도 도움이되지 않습니다. 이 경우에는 사용해야합니다.

text-decoration: underline;
text-decoration-style: dotted;

텍스트와 줄 사이에 더 많은 숨을 쉴 수있는 공간을 원하면 다음을 사용하십시오.

text-underline-position: under;

— 다르 샤나구나와 다나
소스

3

@epascarello 의 답변 형식을 다시 지정했습니다 .

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

스 니펫 확장

— 아나톨리 테크 토닉
소스

0

dotted옵션으로 테두리 하단을 사용할 수 있습니다 .

border-bottom: 1px dotted #807f80;

— Neel
소스

0

이 방법을 시도해 볼 수 있습니다.

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

text-underline-position: under;당신 이 없어도 여전히 점선 밑줄이 표시되지만이 속성은 더 많은 호흡 공간을 제공합니다.

이는 별도의 CSS 파일이나 태그를 사용하지 않고 인라인 스타일을 사용하여 HTML 파일 안에 모든 것을 포함하고 싶다고 가정합니다.

— 모나 잘랄
소스

-2

CSS 없이는 불가능하지 않습니다. 예를 들어 목록 항목으로 :

<li style="border-bottom: 1px dashed"><!--content --></li>

— Davington III
소스

6

CSS 없이는 불가능합니다. style속성은 단순히 요소에 직접 CSS 속성을 적용하는 방법입니다. 스타일 속성에 대한 MDN 문서 를 참조하십시오 .

— mirichan

이런 방식으로 CSS를 추가하는 것은 HTML 스타일링에 대해 효과적으로 생각하는 방법입니다. 물론 그런 것은 없지만 설명하기 쉬운 방법을 위해서는 이것이 가능한 해결책이라고 주장 할 수 있습니다.

— Davington III

그래도 여전히 CSS이며 실제 선호 사항은 별도의 파일을 갖지 않는 것이 었습니다. 이러한 제한으로 문제를 해결하는 가장 좋은 방법은 <style>. 인라인 스타일은 매우 드물게 사용해야합니다.

— mirichan

글을 작성했을 때 인라인 스타일을 사용해야했기 때문입니다. 다른 사람들에게 그 가능성에 주목할 가치가있는 것 같았습니다. 그들이 생각하지 않았을 수도 있다는 것을 감안하여, 전쟁과 평화를위한 적절한 주제가 아닙니다 ... 그들은 아마도 그들이 필요로하는 것을 찾았고 우리의 제안이 그들과 다른 사람들을 위해 거기에 있습니다. 내가 직장에서 게시물을 올릴 때 누군가가 제안에 대해 이미 명백한 것을 지적하는 것을 고려하지 않습니다. 제안이 "이 방법으로해야합니다"가 아닌 제안 일 때, 그래 진정 약을

— 먹으세요

1

당신은 내 의도를 착각합니다. 나는 질문과 관련된 기술적 관찰을하고 있었다. 당신을 부르려는 의도가 없었고, 그런 식으로 만나게되어 죄송합니다.

— mirichan