css水平文字切割

我有两个响应div，一个是图像，另一个是文字，都是66,6％的宽度。但是我需要将文字清理干净，所以不会像行中的一半。这可能与纯css，与js实际上做？css水平文字切割

我的代码：

.head_news { 
 
\t width: 100%; 
 
\t overflow: auto; 
 
} 
 

 
.head_news .image { 
 
\t width: 45%; 
 
\t float: left; 
 
\t margin-right: 5%; 
 
} 
 

 
.head_news .image .auto_height { 
 
\t height: 0px; 
 
\t padding-bottom: calc(100%/1.5); 
 
\t overflow:hidden; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 50% 50%; 
 
\t opacity: 1; 
 
\t -webkit-transition: opacity 0.25s; 
 
    transition: opacity 0.25s; 
 
} 
 

 
.head_news .text { 
 
\t width: 45%; 
 
\t float: left; 
 
} 
 

 
.head_news .text .auto_height { 
 
\t height: 0px; 
 
\t padding-bottom: calc(100%/1.5 - 2%); 
 
\t overflow:hidden; 
 
\t font-size: 14pt; 
 
} 
 

 
.head_news .text .auto_height h2 { 
 
\t font-size: 18pt; 
 
}

<div class='head_news'> 
 
\t \t \t <div class='image'> 
 
\t \t \t \t <div class='auto_height' style='background-image: url(http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg);'></div> 
 
\t \t \t </div> 
 
\t \t \t <div class='text'> 
 
     <div class='auto_height'> 
 
     <h2> 
 
\t \t \t \t \t Some random title of unknown lenght 
 
\t \t \t </h2> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nulla pulvinar eleifend sem. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nullam rhoncus aliquam metus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Aliquam erat volutpat. Nulla quis diam. Curabitur vitae diam non enim vestibulum interdum. Pellentesque arcu. Nulla quis diam. Duis viverra diam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean placerat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. 
 
     </div> 
 
     </div> 
 
\t \t </div>

来源

2017-01-15 nacelnikpohodar

你是什么意思，通过削减文本清洁。你能添加所需行为的屏幕截图吗？ – ab29007

@kittyCat我添加了我不想要的示例 – nacelnikpohodar

检查帖子。我认为它会帮助你。 [检查出来]（http://stackoverflow.com/questions/3220812/css-can-you-prevent-overflow-hidden-from-cutting-off-the-last-line-of-text） – Nimish

您可以使用简单的CSS

overflow:scroll;

或者干脆匹配的字体大小。

来源

2017-01-15 13:56:11

我想剪切文本，不滚动，也无法匹配字体大小，因为网站是响应式的。 – nacelnikpohodar

css水平文字切割

回答

相关问题