Làm cách nào để căn giữa văn bản?
Hiện tại, justify không căn giữa dòng cuối cùng.
Câu trả lời:
Bạn có thể sử dụng text-align-lasttài sản
.center-justified {
text-align: justify;
text-align-last: center;
}
Đây là bảng tương thích: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last#Browser_compatibility .
Hoạt động trên tất cả các trình duyệt ngoại trừ Safari (cả Mac và iOS) , bao gồm cả Internet Explorer.
Cũng trong Internet Explorer, chỉ làm việc với text-align: justify(không có giá trị khác text-align) và startvà endkhông được hỗ trợ.
text-align: justifyđể căn trái dòng cuối cùng? Đó không phải là lý do tại sao OP hỏi làm thế nào để căn giữa nó? : S
Đối với những người tìm kiếm nhận được văn bản đó là cả hai làm trung tâm và hợp lý, sau đây nên làm việc:
<div class="center-justified">...lots and lots of text...</div>
Với quy tắc CSS sau (điều chỉnh thuộc widthtính nếu cần):
.center-justified {
text-align: justify;
margin: 0 auto;
width: 30em;
}
Đây là bản demo trực tiếp .
text-align: justify;đảm bảo rằng văn bản lấp đầy toàn bộ chiều rộng của divnó.margin: 0 auto; thực sự là cách viết tắt của bốn quy tắc:
margin-topvà margin-bottom. Do đó margin-top: 0; margin-bottom: 0, toàn bộ điều này có nghĩa là không có biên trên hoặc dưới div.margin-leftvà margin-right. Vì vậy, quy tắc này dẫn đến margin-left: auto; margin-right: auto. Đây là một điểm thông minh: nó ra lệnh cho trình duyệt lấy bất kỳ không gian nào có sẵn ở hai bên và phân bổ đều ở bên trái và bên phải. Kết quả là văn bản được căn giữa. width: 30em;, giới hạn chiều rộng của div. Chỉ khi chiều rộng bị hạn chế thì mới có một số khoảng trắng còn lại margin: autođể phân phối. Nếu không có quy tắc này, divnó sẽ chiếm tất cả không gian ngang có sẵn và bạn sẽ mất hiệu ứng căn giữa.nó hoạt động với mã này
text-align: justify; text-align-last: center;
Dường như không có cách nào. Bạn có thể giả mạo nó bằng cách sử dụng justify và sau đó gói dòng văn bản cuối cùng trong một khoảng và chỉ đặt điều đó thành căn giữa văn bản. Nó hoạt động tốt đối với các khối văn bản nhỏ nhưng không phải là cách tiếp cận hữu ích đối với số lượng lớn văn bản hoặc văn bản động.
Tôi khuyên bạn nên tìm một người nào đó tại Adobe có liên quan đến công việc W3C của họ và cằn nhằn họ đưa ra lời biện minh phải / trái / trung tâm trong cuộc họp tiếp theo của họ. Nếu ai đó có thể thúc đẩy các tính năng cơ bản về kiểu chữ trong CSS thì đó sẽ là Adobe.
<div class="centered">
<p style="text-align: justify;">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque</p>nisl consectetur et.</div>
Tôi đã có thể đạt được kết quả bằng cách gói nội dung trong thẻ div và áp dụng thuộc tính text-align: center. Ngay sau thẻ div, tôi đã bọc nội dung trong thẻ đoạn văn và áp dụng thuộc tính, text-align: justify. Để làm cho dòng cuối cùng được căn giữa, tôi đã loại trừ nó khỏi thẻ đoạn văn, sau đó trở lại thuộc tính được áp dụng trong thẻ div. Bạn chỉ cần lập chiến lược về số từ bạn muốn trên dòng cuối cùng. Tôi đã bao gồm một bản demo từ fiddle. Hi vọng điêu nay co ich.
Hầu hết các giải pháp ở đây không tính đến bất kỳ loại hộp văn bản đáp ứng nào.
Số lượng văn bản trên dòng cuối cùng của đoạn văn được quy định bởi kích thước của trình duyệt người xem, và vì vậy nó trở nên rất khó khăn.
Tôi nghĩ trong ngắn hạn, nếu bạn muốn bất kỳ loại trình duyệt / thiết bị di động nào, điều này là không thể :(
Tính độ dài của dòng văn bản của bạn và tạo một khối có cùng kích thước với dòng văn bản. Căn giữa khối. Nếu bạn có hai dòng, bạn sẽ cần hai khối nếu chúng có độ dài khác nhau. Bạn có thể sử dụng thẻ span và thẻ br nếu bạn không muốn có thêm khoảng trắng từ các khối. Bạn cũng có thể sử dụng thẻ trước để định dạng bên trong một khối.
Và bạn có thể làm điều này: style = 'text-align: center;'
Đối với ngành dọc, hãy xem: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Đây là cách tốt nhất cho các khối và bố cục trang web, hãy truy cập vào đây và tìm hiểu linh hoạt tiêu chuẩn mới bắt đầu vào năm 2009. http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/# justify-content-property
Ngoài ra, w3schools có rất nhiều ví dụ về flex.
Giải pháp (không phải là tốt nhất, nhưng vẫn hoạt động đối với một số trường hợp) cho văn bản không di động với chiều rộng cố định. Hữu ích cho các trường hợp khi có một ít khoảng trống để "kéo dài" văn bản đến cuối dòng áp chót. Tạo một số ký hiệu ở cuối đoạn văn (thử nghiệm với độ dài của chúng) và ẩn nó đi; áp dụng cho vị trí tuyệt đối của đoạn văn hoặc chỉ sửa không gian trống bằng padding / marging.
Cách tính toán / trình duyệt chéo tốt cho văn bản căn giữa.
Ví dụ (đoạn trước):
.paragraph {
width:455px;
text-align:justify;
}
.center{
display:block;
text-align:center;
margin-top:-17px;
}<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,<br><center>vel scelerisque nisl consectetur et.</center></div>Và sau khi sửa chữa:
.paragraph {
width:455px;
text-align:justify;
position:relative;
}
.center{
display:block;
text-align:center;
margin-top:-17px;
}
.paragraph b{
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}<div class="paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <b>__</b><br><div class="center">vel scelerisque nisl consectetur et.</div></div>Đơn giản. Text-align: justify; (để căn chỉnh các phần tử) Padding-left:? px; (để căn giữa các phần tử)
Bạn cũng có thể chia phần tử thành hai thông qua HTML + JS.
HTML:
<div class='justificator'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book.
</div>
JS:
function justify() {
// Query for elements search
let arr = document.querySelectorAll('.justificator');
for (let current of arr) {
let oldHeight = current.offsetHeight;
// Stores cut part
let buffer = '';
if (current.innerText.lastIndexOf(' ') >= 0) {
while (current.offsetHeight == oldHeight) {
let lastIndex = current.innerText.lastIndexOf(' ');
buffer = current.innerText.substring(lastIndex) + buffer;
current.innerText = current.innerText.substring(0, lastIndex);
}
let sibling = current.cloneNode(true);
sibling.innerText = buffer;
sibling.classList.remove('justificator');
// Center
sibling.style['text-align'] = 'center';
current.style['text-align'] = 'justify';
// For devices that do support text-align-last
current.style['text-align-last'] = 'justify';
// Insert new element after current
current.parentNode.insertBefore(sibling, current.nextSibling);
}
}
}
document.addEventListener("DOMContentLoaded", justify);
Đây là một ví dụ với thẻ div và p
function justify() {
// Query for elements search
let arr = document.querySelectorAll('.justificator');
for (let current of arr) {
let oldHeight = current.offsetHeight;
// Stores cut part
let buffer = '';
if (current.innerText.lastIndexOf(' ') >= 0) {
while (current.offsetHeight == oldHeight) {
let lastIndex = current.innerText.lastIndexOf(' ');
buffer = current.innerText.substring(lastIndex) + buffer;
current.innerText = current.innerText.substring(0, lastIndex);
}
let sibling = current.cloneNode(true);
sibling.innerText = buffer;
sibling.classList.remove('justificator');
// Center
sibling.style['text-align'] = 'center';
// For devices that do support text-align-last
current.style['text-align-last'] = 'justify';
current.style['text-align'] = 'justify';
// Insert new element after current
current.parentNode.insertBefore(sibling, current.nextSibling);
}
}
}
justify();p.justificator {
margin-bottom: 0px;
}
p.justificator + p {
margin-top: 0px;
}<div class='justificator'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<p class='justificator'>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p><p>Some other text</p>