Hướng dẫn how to add text in div in html - cách thêm văn bản vào div trong html

-1

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang sử dụng Div vì tôi muốn tô màu không phải toàn bộ đường viền mà là góc ngoài, nó hoạt động nhưng bây giờ điều tôi muốn làm là thêm một văn bản/liên kết ở trung tâm của bốn góc.

Nếu tôi sẽ làm điều đó, văn bản vẫn tăng gấp bốn lần ở mỗi góc và thay đổi ngay cả vị trí của góc div.

Có cách nào tốt hơn để làm điều đó không?

Nó có vẻ đơn giản như nó là nhưng tôi đã có trong kho này trong nhiều ngày, đây là mã của tôi trong đoạn trích:

html,
body {
  color: #fff;
  background: #000;
  width: 100%;
}

.wholeDivDom {
  margin: 0.7%;
}

.outer {
  width: 350px;
  height: 120px;
  background: black;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  height: 20%;
  width: 10%;
}

.outer:after {
  content: "";
  right: 0;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.outer:before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
}

.inner:before {
  bottom: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.inner:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

Đã hỏi ngày 25 tháng 6 năm 2018 lúc 10:53Jun 25, 2018 at 10:53

Ruder.JRuder.JRuder.J

131 Huy hiệu vàng1 Huy hiệu bạc4 Huy hiệu đồng1 gold badge1 silver badge4 bronze badges

1

Chỉ cần sử dụng thẻ span để thêm văn bản của bạn và áp dụng position: absolute cho nó. Sau đó, cho nó ____10 và

html,
body {
  color: #fff;
  background: #000;
  width: 100%;
}

.wholeDivDom {
  margin: 0.7%;
}

.outer {
  width: 350px;
  height: 120px;
  background: black;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  height: 20%;
  width: 10%;
}

.outer:after {
  content: "Hello";
  right: 0;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.outer:before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
}

span {
  position: absolute;
  transform: translate[-50%,-50%];
  left: 50%;
  top: 50%;
}

.inner:before {
  bottom: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.inner:after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

  
    

      

        

            Text goes here
        
      
    
  

Đã trả lời ngày 25 tháng 6 năm 2018 lúc 11:07Jun 25, 2018 at 11:07

Nilesh Naiknilesh NaikNilesh Naik

7363 Huy hiệu bạc9 Huy hiệu Đồng3 silver badges9 bronze badges

Tôi đã giải thích các phương thức JQuery .Append [] và .Appendto [] trong các bài viết trước của tôi, cũng phục vụ cùng một mục đích. Tuy nhiên, nếu bạn muốn gắn bó với JavaScript thuần túy để nối hoặc thêm văn bản, nội dung, v.v. vào một phần tử, thì bài đăng này là dành cho bạn.

Có hai phương thức khác nhau trong JavaScript, sử dụng mà bạn có thể dễ dàng thêm văn bản hoặc nội dung vào một phần tử, một cách linh hoạt. Tôi đang chia sẻ các ví dụ hiển thị cả hai phương pháp.two different methods in JavaScript, using which you can easily add text or contents to a

    

    	
    
    
    

        

            Content inside p element.
        
    


    let fillData = [] => {
        let ele = document.getElementById['container'];
        ele.innerHTML += 'Hello, I am Arun';
    }

    

    	
    
    
    

        

            Content inside p element.
        
    


    let fillData = [] => {
        let ele = document.getElementById['container'];
        
        let node = document.createTextNode ['Hello, I am Arun'];
        ele.appendChild[node];
    }

ele.innerHTML = 'Hello, I am Arun';    

ele.innerHTML += 'Hello, I am Arun';