CSS ::在元素文本重叠之后

Question

我在这里使用轮播：http://www.inventivewebdesign.com/studioartnouveau/gallery-2/

我使用的轮播程序不允许添加字幕，因此我使用以下 CSS 添加它们，这样我们就有了实时文本而不是向图像添加文本：

/* Carousel */
.ult-carousel-wrapper {
  margin-bottom: 35px;
  position: relative;
}

.ult-item-wrap{padding-bottom:95px; }
.ult-item-wrap a{font-size:28px; color:#B0964D; font-family: 'Alex Brush', cursive;  word-wrap: break-word;}
.ult-item-wrap a:hover{color:#333;}
.ult-item-wrap img{margin-bottom:15px;}
.sculpt-rest a::after{ content: "Sculpture Restoration";}
.sculpt-comm  a::after{ content: "Sculpture Commissions";}
.consultation a::after{ content: "Consultation Fees"; }
.artists a::after{ content: "Meet the Artists";}
.new-directions a::after{ content: "New Directions";}
.awards a::after{ content: "Custom Awards";}
.paint-rest a::after{ content: "Painting Restoration";}

@media only screen and ( max-width:1280px ) {
.ult-item-wrap a{font-size:13px; font-family:Helvetica;}
}

我遇到的问题是，随着屏幕尺寸变小，单词重叠而不是转到下面的一行。

有谁知道如何让它们转到下面的行而不是重叠？

这里是 HTML:

<div class="ult-carousel-189751681554c36181c5d8  slick-initialized slick-slider"><div tabindex="0" aria-live="polite" class="slick-list draggable"><div style="opacity: 1; width: 4284px; transform: translate3d(-2016px, 0px, 0px); transition: transform 5000ms ease 0s;" class="slick-track"><div style="width: 192px;" aria-hidden="true" data-slick-index="-5" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element consultation">
        <div class="wpb_wrapper">
            <a href="/?page_id=15"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Consultation-Services-PNG-72-dpi.png" class="attachment-full" alt="Consultation Fees" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-4" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element artists">
        <div class="wpb_wrapper">
            <a href="/?page_id=8"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Meet-the-Artists-PNG-72-dpi.png" class="attachment-full" alt="Meet the Artists - About Us" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-3" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element new-directions">
        <div class="wpb_wrapper">
            <a href="/?page_id=17"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/New-Directions-PNG-72-dpi.png" class="attachment-full" alt="New Directions" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-2" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element awards ">
        <div class="wpb_wrapper">
            <a href="/?page_id=19"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Custom-Awards-PNG-72-dpi.png" class="attachment-full" alt="Custom Awards" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="-1" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element paint-rest">
        <div class="wpb_wrapper">
            <a href="/?page_id=21"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Painting-Restoration-PNG-72-dpi.png" class="attachment-full" alt="Painting Restoration" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="0" class="ult-item-wrap slick-slide" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element sculpt-rest">
        <div class="wpb_wrapper">
            <a href="/?page_id=11"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Sculpture-Restoration-PNG-72-dpi.png" class="attachment-full" alt="Sculpture Restoration" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="1" class="ult-item-wrap slick-slide" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element sculpt-comm">
        <div class="wpb_wrapper">
            <a href="/?page_id=13"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Sculpture-Commissions-PNG-72-dpi.png" class="attachment-full" alt="Sculpture Commissions" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="2" class="ult-item-wrap slick-slide" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element consultation">
        <div class="wpb_wrapper">
            <a href="/?page_id=15"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Consultation-Services-PNG-72-dpi.png" class="attachment-full" alt="Consultation Fees" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="3" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element artists">
        <div class="wpb_wrapper">
            <a href="/?page_id=8"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Meet-the-Artists-PNG-72-dpi.png" class="attachment-full" alt="Meet the Artists - About Us" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="4" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element new-directions">
        <div class="wpb_wrapper">
            <a href="/?page_id=17"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/New-Directions-PNG-72-dpi.png" class="attachment-full" alt="New Directions" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="5" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element awards ">
        <div class="wpb_wrapper">
            <a href="/?page_id=19"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Custom-Awards-PNG-72-dpi.png" class="attachment-full" alt="Custom Awards" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="6" class="ult-item-wrap slick-slide slick-active animated no-animation" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element paint-rest">
        <div class="wpb_wrapper">
            <a href="/?page_id=21"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Painting-Restoration-PNG-72-dpi.png" class="attachment-full" alt="Painting Restoration" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="false" data-slick-index="7" class="ult-item-wrap slick-slide slick-cloned slick-active animated no-animation" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element sculpt-rest">
        <div class="wpb_wrapper">
            <a href="/?page_id=11"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Sculpture-Restoration-PNG-72-dpi.png" class="attachment-full" alt="Sculpture Restoration" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="8" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element sculpt-comm">
        <div class="wpb_wrapper">
            <a href="/?page_id=13"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Sculpture-Commissions-PNG-72-dpi.png" class="attachment-full" alt="Sculpture Commissions" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="9" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element consultation">
        <div class="wpb_wrapper">
            <a href="/?page_id=15"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Consultation-Services-PNG-72-dpi.png" class="attachment-full" alt="Consultation Fees" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="10" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element artists">
        <div class="wpb_wrapper">
            <a href="/?page_id=8"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/Meet-the-Artists-PNG-72-dpi.png" class="attachment-full" alt="Meet the Artists - About Us" height="648" width="432"></a>
        </div> 
    </div> </div><div style="width: 192px;" aria-hidden="true" data-slick-index="11" class="ult-item-wrap slick-slide slick-cloned" data-animation="animated no-animation">
    <div class="wpb_single_image wpb_content_element new-directions">
        <div class="wpb_wrapper">
            <a href="/?page_id=17"><img src="http://www.inventivewebdesign.com/studioartnouveau/wp-content/uploads/2015/05/New-Directions-PNG-72-dpi.png" class="attachment-full" alt="New Directions" height="648" width="432"></a>
        </div> 
    </div> </div></div></div></div>

提前致谢，

马特

Answer 1

在您的 css 中发表评论：

.wpb_single_image {
    line-height: 0;
}

或向此 css 添加一些值，例如 line-height:20px;，这样文本就不会相互重叠。希望这对你有帮助:)

我猜它在 style.css

CSS ::在元素文本重叠之后

CSS ::after element text overlapping

html

css

wordpress

carousel