วิธีการเพิ่มขีดเส้นใต้แบบจุดใต้ข้อความ HTML

97

คุณขีดเส้นใต้ข้อความ html อย่างไรเพื่อให้บรรทัดใต้ข้อความมีจุดแทนที่จะเป็นขีดเส้นใต้มาตรฐาน โดยเฉพาะอย่างยิ่งฉันต้องการทำสิ่งนี้โดยไม่ใช้ไฟล์ CSS แยกต่างหาก ฉันเป็นมือใหม่ที่ html

html underline

— parap
แหล่งที่มา

13

ทำไมคุณถึงใช้ CSS ไม่ได้? อาจจะสร้างเพจเป็นรูปเดียวแล้วเพิ่มบรรทัดด้วย mspaint?

— epascarello

ฉันไม่คิดว่าจะทำได้หากไม่มี 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>แท็ก (ฉันแก้ไขคำตอบแล้ว)

— Alfred Xing

2

คุณสามารถลองdottedแทนdashed

— Brian Burns

ทางออกที่ดีและเป็นไปได้ อย่าตั้งรหัส js ให้ฉันนะ;)

— Ahmet Can Güven

นี่คือคำตอบด้วยการรองรับข้อความหลายบรรทัดstackoverflow.com/a/4365458/1078641

— electroid

38

ใช้โค้ด CSS ต่อไปนี้ ...

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

— Shakeel Ahmed
แหล่งที่มา

3

นี่ควรเป็นคำตอบที่ได้รับการยอมรับ ตามรูปแบบกล่องโดยใช้จุดborderจะถูกวางไว้ด้านนอกpaddingและจะทำให้ห่างไกลจากข้อความ

— Ryan Walker

3

มีไวยากรณ์สั้น ๆ : 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>

— epascarello
แหล่งที่มา

10

องค์ประกอบ HTML5 สามารถขีดเส้นใต้แบบจุดดังนั้นข้อความด้านล่างจะมีเส้นประแทนที่จะขีดเส้นใต้ปกติ และแอตทริบิวต์ title จะสร้างเคล็ดลับเครื่องมือสำหรับผู้ใช้เมื่อพวกเขาวางเคอร์เซอร์เหนือองค์ประกอบ:

หมายเหตุ:เส้นขอบ / ขีดเส้นใต้จะแสดงโดยค่าเริ่มต้นใน Firefox และ Opera แต่ IE8, Safari และ Chrome จำเป็นต้องมี CSS บรรทัด:

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

— ฟาติมาวาฮีด
แหล่งที่มา

นี่คือคำตอบที่ถูกต้อง สั้นและไม่มี CSS ขอบคุณ.

— Saeed Ahadian

ด้วย HTML5 สิ่งนี้ควรเป็นคำตอบที่ยอมรับได้

— perry

4

หากเนื้อหามีมากกว่า 1 บรรทัดการเพิ่มเส้นขอบด้านล่างจะไม่ช่วยอะไร ในกรณีนี้คุณจะต้องใช้

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

หากคุณต้องการพื้นที่หายใจเพิ่มเติมระหว่างข้อความและบรรทัดให้ใช้

text-underline-position: under;

— Darshana Gunawardana
แหล่งที่มา

3

จัดรูปแบบคำตอบโดย@epascarello :

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

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

ขยายข้อมูลโค้ด

— anatoly techtonik
แหล่งที่มา

0

คุณสามารถใช้ขอบล่างพร้อมdottedตัวเลือก

border-bottom: 1px dotted #807f80;

— นีล
แหล่งที่มา

0

คุณสามารถลองใช้วิธีนี้:

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

โปรดทราบว่าหากไม่มีtext-underline-position: under;คุณจะมีจุดขีดเส้นใต้ แต่คุณสมบัตินี้จะทำให้มีพื้นที่หายใจมากขึ้น

สมมติว่าคุณต้องการฝังทุกอย่างภายในไฟล์ HTML โดยใช้สไตล์อินไลน์และไม่ใช้ไฟล์ CSS หรือแท็กแยกต่างหาก

— โมนาจาลาล
แหล่งที่มา

-2

ไม่ใช่เรื่องที่เป็นไปไม่ได้หากไม่มี CSS ตัวอย่างเช่นรายการ:

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

— เดวิงตัน III
แหล่งที่มา

6

เป็นไปไม่ได้หากไม่มี CSS styleแอตทริบิวต์เป็นเพียงวิธีการใช้ CSS คุณสมบัติโดยตรงกับองค์ประกอบต์ ดูเอกสาร MDNเกี่ยวกับแอตทริบิวต์ style

— mirichan

การเพิ่ม CSS ด้วยวิธีนี้เป็นวิธีคิดอย่างมีประสิทธิภาพเกี่ยวกับรูปแบบ html แน่นอนคุณสามารถโต้แย้งได้ว่าไม่มีสิ่งนั้น แต่สำหรับวิธีการอธิบายที่ง่ายนี่เป็นทางออกที่เป็นไปได้

— Davington III

แม้ว่าจะยังคงเป็น CSS และการตั้งค่าที่แท้จริงที่ได้รับคือไม่มีไฟล์แยกต่างหาก วิธีที่ดีที่สุดที่จะไปเกี่ยวกับการแก้ปัญหาที่มีข้อ จำกัด <style>ที่เป็น ควรใช้รูปแบบอินไลน์ให้เพียงพอ

— mirichan

ตอนที่ฉันสร้างโพสต์นั้นเป็นเพราะฉันต้องใช้สไตล์อินไลน์ ดูเหมือนว่าคุ้มค่าที่จะสังเกตว่าความเป็นไปได้สำหรับคนอื่น ๆ imo ในกรณีที่พวกเขาอาจไม่ได้นึกถึงมันไม่ใช่หัวข้อที่เหมาะสมสำหรับสงครามและสันติภาพ ... พวกเขาน่าจะพบสิ่งที่ต้องการและคำแนะนำของเรามีไว้สำหรับคนเหล่านั้นและคนอื่น ๆ ที่อาจจะ ต้องการพวกเขาเมื่อฉันโพสต์จากที่ทำงานฉันไม่ได้คำนึงถึงใครบางคนที่ชี้ให้เห็นบางสิ่งที่ชัดเจนอยู่แล้วเกี่ยวกับข้อเสนอแนะเมื่อมันเป็นคำแนะนำที่ไม่ใช่ "คุณต้องทำแบบนี้" ดังนั้น

— จงทาน

1

คุณผิดความตั้งใจของฉัน ฉันกำลังทำการสังเกตทางเทคนิคที่เกี่ยวข้องกับคำถามที่ถาม ฉันไม่ได้ตั้งใจที่จะโทรหาคุณและฉันขอโทษที่มันเจอแบบนั้น

— mirichan